Home Forums Weaver Xtreme Theme Weaver Xtreme: Primary Menu (Smart Menu) styling issue

This topic contains 9 replies, has 2 voices, and was last updated by  Nele 1 week, 2 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #52392

    Nele
    Participant

    Homepage:Ā https://gvsonline.eu/faq/

    On Main Options ->Menu I ticked Use SmartMenus and my Menu Mobile/Desktop Switch Point is 1147 px.
    I couldn’t find styling options for the menu when it becomes a Hamburger Menu.

    1. On mobile the height of the menu items are well. But on tablet the height of the items is too big. How can I get them smaller vertical?
    2. How can I remove the horizontal divider lines? Is it possible to have only the top line, but remove all other dividers?
    #52398

    scrambler
    Moderator

    The size is driven by the images you have in the Menu HTML area.

    To change the size on mobile, you used show/hide shortcodes with different images on mobile, but the mobile treshold is 768, so you still get your desktop image between 768 and the 1147 treshold you modified for the hamburger icon.

    Instead of using different images with show hide shortcodes, you can just use an @media rule to change the side of these images undet 1147. The rule (to place in the theme Custom CSS Rule box will look like

    @media all and (max-width:1147px){
    .wvrx-menu-left img {height:50px;width:auto;}
    body {margin-top:60px !important;}
    }

    Note the body margin top must be adjusted based on the heigh you select for the image.
    You should not need top affect the flag images on the right, but could add a rule for the right html inside the @media rule if needed.

    I have to go now, but will come back for the divider line question šŸ™‚

    #52403

    Nele
    Participant

    I have put in the rule and also a rule for the right html.
    Thank you for this! But the background of each item is still high (vertical) after switching for the hamburger icon.
    On my iPad the menu takes more than 50% space, when I open it (landscape format).

    And thank you for coming back

    #52406

    scrambler
    Moderator

    You made two different @media rule with different margin for the body.

    You can also add a rule to remove a bottom padding on the bar (in blue below)

    You have

    @media all and (max-width:1147px){
    .wvrx-menu-left img {height:50px;width:auto;}
    body {margin-top:60px !important;}
    }

    @media all and (max-width:1147px){
    .wvrx-menu-right img {height:20px;width:auto;}
    body {margin-top:90px !important;}
    }

    when you should have

    @media all and (max-width:1147px){
    .wvrx-menu-left img {height:50px;width:auto;}
    .wvrx-menu-right img {height:20px;width:auto;}
    body {margin-top:60px !important;}
    .wvrx-menu-container {padding-bottom:0;}
    }

     

    #52407

    scrambler
    Moderator

    For the divider lines, you can use the rules below

    .is-menu-mobile .sm.wvrx-menu li {border:none;}
    .is-menu-mobile .sm.wvrx-menu li:nth-of-type(1), .is-menu-mobile .sm.wvrx-menu li:nth-of-type(2)Ā {border-top:1px solid rgba(255, 255, 255, 0.4);}

     

    #52408

    Nele
    Participant

    Okay, the new rule is inserted and also the rule to remove the divider.
    But now the space is still there…

    #52411

    scrambler
    Moderator

    It looks good to me, make sure you clear all your caches, or explain what you mean by “But now the space is still thereā€¦

    #52421

    Nele
    Participant

    I have cleared the cache but it is still the same. I inserted a picture from my iPad, where you can see, what I mean.
    The distance or interval between the menu items is very big (the picture shows the full height of the iPad).They should be narrower.

    Picture from the Menu on the iPad

    #52433

    scrambler
    Moderator

    OK, I misunderstood from the beginning, as I thought you mean the menu bar itself.

    Forget the @media rule I gave you, unless you wanted to fix your menu bar heigh issue.

    Regarding the Slide open menu item height, this appears to be because the Menu item top and bottom padding rule does not appear to be corrected when using a different threshold for the Mobile menu.

    Add the rule below to set the padding properly in the interval corresponding to your changed treshold

    @media (min-width:768px) and (max-width:1147px) {
    .menu-primary .wvrx-menu a {padding:0.6em .75em;}
    }

    @weaver, there is an @media ruleĀ rule below that contains the rule applying the top and bottom menu item padding. That rule is hard coded with the 768px threshold, so when people change the mobile menu threshold to a different value, there is an interval where the top and bottom padding of the menu items will be wrong.

    If the threshold is higher than 768, there will an interval above 768px where the top and bottom padding meant for the desktop menu bar menus item will also be applied to the Mobile menuĀ  item (what was happening here).

    If the threshold is lower than 768px, there will be an interval below 768px where the Desktop top and bottom menu item padding wont be applied.

    Ideally the padding rule should be in a separate @media rule where the 768px value is changed to whatever the threshold is set at.

    @media(min-width:768px) {
    .menu-primary .wvrx-menu a{padding-top:2.00000em;padding-bottom:2.00000em;}
    .menu-primary .menu-arrows .toggle-submenu:after{top:3.20000em;}
    .menu-primary .wvrx-menu,.menu-primary .wvrx-menu-container{text-align:center;line-height:0;}
    }

    #52436

    Nele
    Participant

    @scrambler thank you for this. And it was also useful to learn about the rule for the menu bar itself!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.