[Resolved] Distance of submenu / dropdown of the main navigation

Home Forums Support Distance of submenu / dropdown of the main navigation

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1333295
    Daniel

    Hey guys,

    I would like to add a little more distance to the sub menu of my main navigation:

    sub menu

    Meaning, moving the entire submenu box down a little.
    Everything I try seems to move the entire Navigation, not only the sub menu.

    How do I need to target this?

    Thanks a lot! 🙂

    #1333447
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1333638
    Daniel

    Hey Leo,

    I have edited the original post with the link (site is still in development)

    Theres a password protection on the entire site:

    user: rb
    password: elegantowl

    Thanks! 🙂

    #1333771
    David
    Staff
    Customer Support

    Hi there,

    the simplest method is to increase the Customizer > Layout > Primary Navigation > Menu Item Height. But then you would need to adjust for the underline and i assume you don’t want to increase the height of the nav…..

    Lets try this CSS instead:

    @media(min-width: 769px) {
        .main-navigation .main-nav > ul > li {
            line-height: 60px;
            margin-top: -17px;
            margin-bottom: -17px;
        }
    }

    Currently the line-height of your li is 25px.
    We increase this to 60px. Which adds 17.5px of space above and below. Then we offset that with some negative margins.

    In theory this should keep the menu the same height but add a 17px gap between it and the sub menu.

    #1333890
    Daniel

    Thanks David,

    that kinda worked – it did however increase the height of each individual submenu item aswell:

    sub menu

    .. would adding a custom CSS class to each menu item maybe work here? Or is there a simpler solution?

    Thanks!

    #1333934
    David
    Staff
    Customer Support

    Can you add the CSS, publish the customizer changes and then check the front end of the site?

    #1333955
    Daniel

    I just did – it’s the same as on the screenshot. I left it in so you can take a look yourself 🙂

    #1333975
    David
    Staff
    Customer Support

    In Customizer > Layout > Primary Navigation does the Sub-Menu Item Height have a value ? If it doesn’t can you give it a value.

    #1334842
    Daniel

    It is set to 15px – changing it to be lower or higher doesn’t have any effect.
    Only once I go upwards of 50px or so, it will add visibly more height to the sub menu items.
    Any ideas? 😅

    #1335161
    David
    Staff
    Customer Support

    Try this to set the size of the Sub Menu:

    .main-navigation ul ul li {
        line-height: 40px;
    }
    #1335209
    Daniel

    Thanks David! That worked 🙂
    I just had to assign a custom CSS class to the last menu item as the bottom margin wasn’t right and changing it for all of them would mess up the line-height again.
    Here’s what I used:

    .main-navigation ul ul li { line-height: 38px; }
    .lastitem { margin-bottom:10px; }

    Thanks again!

    #1335242
    David
    Staff
    Customer Support
    #1335898
    Daniel

    Everything is working smoothly now – I have managed to get all the margins right with some custom CSS classes on menu items. Only one small issue. When switching to tablet / mobile view and the navigation going into the nested dropdown, there will be the previously set gap abouve the sub menu, only in this case it is not needed. I have marked it in red just so it is clear which gap I am talking about:

    sub menu

    You can see the code I currently have on the screenshot:

    @media(min-width: 769px) {
      .main-navigation .main-nav > ul > li {
            line-height: 60px;
            margin-top: 0px;
            margin-bottom: -20px;  }
    .lastitem { margin-bottom:10px; }
    .firstitem {  margin-top:8px;  }
    .main-navigation ul ul li {
        line-height: 39px; }
    }
    
    @media(max-width: 768px) {
     .main-navigation .main-nav > ul > li {
            line-height: 60px;
            margin-top: -0px;
            margin-bottom: -20px;  }
    .lastitem { margin-bottom:10px; }
    .firstitem {  margin-top:8px;  }
    .main-navigation ul ul li {
        line-height: 20px; }
    }

    Am I missing something? Thanks!

    #1336543
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I believe that gap is coming from this CSS:

    .mobile-header-navigation ul {
        margin-top: 20px !important;
        margin-bottom: -10px !important;
    }

    If you remove that margin-top, it should go away.

    #1337018
    Daniel

    Derp. Thanks Tom! That was were it was coming from indeed 🙂

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