Home Forums Weaver Xtreme Theme controlling the width of image and menu bar at top of site

Topic Resolution: Resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #66204
    Skippy
    Participant

    Here is the site I’m working with:

    About ABC Realty of Northern Colorado

    Not using the Plus plugin, only Weaver X theme.

    In the top blue bar is the logo image to the left, to the right is the main menu.

    What I wanted to do was space those farther apart from each other – thus I suppose that would be controlling the width of that particular element/area?

    I was not able to figure out how to do this through the Weaver X Admin (I am not using the customizer) but it seems like this should be somewhere in the settings. Is it? And if so where/how?

    I did achieve what I wanted by using CSS.  I added this bit of CSS:

    /* making the menu and image wider */
    .wvrx-not-safari #nav-primary .wvrx-menu-container {
    padding-left: calc( ( 45vw – 4px – ( 1100px / 2 ) ) + 0px + 0px ) !important;
    padding-right: calc( ( 45vw – 4px – ( 1100px / 2 ) ) + 0px + 0px ) !important;
    }

    A modification of the original CSS which was this:

    .wvrx-not-safari #nav-primary .wvrx-menu-container {
    padding-left: calc( ( 50vw – 4px – ( 1100px / 2 ) ) + 0px + 0px );
    padding-right: calc( ( 50vw – 4px – ( 1100px / 2 ) ) + 0px + 0px );
    }

    I got it working yes, but I’d like to know the right/better way to get it doing what I want.

    Thanks!

    #66206
    scrambler
    Moderator

    You should not mess with that CSS, there is something else going on.

    You appear to cumulate two different methods to make the menu full width, so we first need to correct that and then we can decide on the best way to do what you want

    To make the menu full width, you should be using Main options > Menus > Primary Menu bar > Align menu > Align Full Items right

    I believe you also have things checked in Main options > Full width which are interfering.

    In Main Options Full Width do the following:”

    • Make sure “One step Layout” is on Traditional.
    • Make sure All options in that page are unchecked.

    Once that is done post back if you need adjustments and we can give you the best CSS to use for that

     

    #66207
    Skippy
    Participant

    I figured I was doing it wrong.  🙂  I like breaking things.

    Main options > Menus > Primary Menu bar > Align menu > Align Full Items right

    Yes, that’s how that was set up.

    One step layout was on ‘full width – extends BG to full width’

    I have changed that.

    Options on the page I had checked were:

    <small>Primary Menu Extend BG</small>

    and

    <small>Secondary Menu Extend BG</small>

    I have unchecked those.

    That makes quite the difference.  Now I want to bring the image and menu closer to the center.

     

    #66210
    scrambler
    Moderator

    Two ways to do that depending on the responsive behavior you are after

    Do you want the content (Image and menu to be as wide of the site content or wider)

    If Wider.

    Do you want is as wide as the browser, no matter how big, but with some space on left and right

    Or do you want the Image and menu to never become wider than a certain width, which means that  as the browser gets bigger, the space between them will become wider, but up to the content having a certain with after which they will stop moving apart.

    #66214
    Skippy
    Participant

    As wide as the browser, no matter how wide – but always with some space on the left and right.

     

    #66216
    scrambler
    Moderator

    Add the rule below to the theme Global Custom CSS Rule Box

    .is-desktop .wvrx-menu-container {padding-left:20px;padding-right:20px;}

    If you want the space to be proportional to the browser width (more space on large browser) use vw unit (% of viewer width)

    .is-desktop .wvrx-menu-container {padding-left:5vw;padding-right:5vw;}

    #66219
    Skippy
    Participant

    That seems to be doing what I want. Thanks Scrambler. You are the best!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.