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

[Daniel]

Hey guys,

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

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! 🙂

[Leo]

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 🙂

[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! 🙂

[David]

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.

[Daniel]

Thanks David,

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

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

Thanks!

[David]

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

[Daniel]

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

[David]

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

[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? 😅

[David]

Try this to set the size of the Sub Menu:

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

[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!

[David]

Glad to be of help

[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:

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!

[Tom]

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.

[Daniel]

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

[Author]

Posts