Home Forums Weaver Xtreme Theme Extra space being added somehow causes my main menu bar to take twice the height

Topic Resolution: Answered
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #65464
    Answered
    MrWheeler
    Participant

    Thank very much in advance for any help! I am loving this theme, but I have a minor glitch I can’t figure out or find a solution to. On my tablet in landscape mode, I would like the main menu of the site I’m working on (below) to take up just one line. Admittedly, it is a crowded menu, but it looks like only one line is really needed. Extra space, perhaps on the sides of the menu items, seems to be forcing the menu onto a second line; only the site logo (linking to Home) appears on the first line. Can the space on the side(s) and/or the minimum space between my menu items be tweaked for tablets and/or low resolution desktops to make it all be on one line? The SmartMenu functionality is turned on.

    The site is stpeterregina.ca.

    Thanks very much!

    #65466
    scrambler
    Moderator

    On a desktop, if you slowly reduce the browser width, you will see that it goes to two lines only when there is no more space available.

    You may be able to keep it on one line a little longer, but it will at one point go onto two lines, so it may still be on one line on your device, but will not on another one with a screen a little smaller.

    That said, here are a few options to keep it on one line a little longer.

    Remove the right margin of the logo:
    Add the rule below to the theme Global Custom CSS Rule box
    .menu-primary .custom-logo-on-menu {margin-right:0;}

    Remove (put zero) or reduce (ie: 0.1em) the 1em left margin on the menu bar:
    Add the rule below to the theme Global Custom CSS Rule box with the value you choose
    ul.wvrx-menu {margin-left:0.1em;}

    If that is not enough for your tablet next we can reduce the text size and or the space between menu items, but that is going to start looking really crowded.

    #65467
    MrWheeler
    Participant

    Fantastic, thanks again, Scrambler! The menu now looks good in the two browsers on my 8 inch test tablet. 😀 There are probably some smaller tablets or ipads that will still have the extra line (my testing equipment is limited), but I don’t want to make the text size any smaller or squeeze the logo. About shrinking the space between menu items – is there a way to do that only when necessary, or very slightly, without defining further breakpoints?

    #65468
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    You seem to have added a CSS rule to change the right padding on the menu items using the rule below

    @media screen and (min-width: 768px){.menu-primary.menu-type-standard .wvrx-menu.sm .has-submenu {padding-right:0.85em;}
    }

    and left the padding left at default (0.75em).

    What you could try is to replace your rule by the one below that will set both left and right padding using a fixed base value (0,1em), plus a percentage of the browser width (0.8vw = 0.8% of the Viewer Width)

    That will make the space increase a bit on wide browsers and shrink more on narrow browser .

    @media screen and (min-width: 768px){.menu-primary.menu-type-standard .wvrx-menu.sm .has-submenu {padding-right:calc(0.1em + 0.8vw);padding-left:calc(0.1em + 0.8vw);}
    }

    You can use the Developer tool console to watch how the left and right padding values change when you change the browser size.

    Adjusting the fixed portion (0.1em) and the variable portion (0.8vw) will cause a more or less subtle change.

    #65469
    MrWheeler
    Participant

    The code you suggested has certainly helped, as you said, on wide and narrow browser windows – awesome! I can’t take credit for the @media screen rule that you found; I’m guessing it was made by the smartmenu code. I don’t know CSS, so I couldn’t have made it; I can’t find it anywhere in the user-added CSS areas, and I don’t remember adding it. So, I think that for my site anyway, your code suggestion outsmarted the smartmenu code, which I’m sure was very smart to begin with.

    About the default 0.75em default left padding, I don’t see where I could change that. I found options labelled for top and bottom menu padding, but not left or right.

    If I get a chance to test my site on other small(ish) tablet and desktop screens, I may try to play with/tweak the 0.1em and 0.8vw settings. For now, it just looks great to me. I’ll be putting something in the tip jar again soon. Right now, 2:30 a.m., and probably a crazy busy day tomorrow, I’ll have to put it off briefly, but I won’t forget.

    Have you and all of you brilliant people at Weaver Xtreme have a great day!

    #65471
    scrambler
    Moderator

    You are right, the rule did come from the plus smart menus.

    There are no settings in the theme to change the left padding of the menu item, only custom CSS.

    Glad it worked out for you

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