[Resolved] How to Adjust Spacing for Submenu

[Tom]

Hi I have been trying to get the spacing between my submenu (where it starts) and the bottom of my header to align. Searched through options in primary navigation and secondary navigation but don’t see what I’m looking for. I attach an image that shows the problem more clearly.

https://drive.google.com/file/d/1N0tV5UaZqXlnPvgU5QOi54kI89ZJS-x2/view?usp=sharing

Thanks,
Tom

[Leo]

Hi there,

Try this:
https://generatepress.com/forums/topic/submenu-positioning/#post-1577943

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Tom]

Thanks Leo, seems to work (I changed from 10px to 20px).

Is the entire CSS code that David wrote there required to get this to work? Just don’t want to put something that will cause a different issue later.

Code I’m using:

@media(min-width: 768px) {
.main-navigation .main-nav ul li.menu-item-has-children:before
{
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px; /* height of nav plus space below */
}
.main-navigation .main-nav ul ul {
margin-top: 20px;
}
}

[Ying]

Hi Tom,

If you are using Hover to open the submenu, you’ll need the full CSS.

If you are not, then only this CSS is enough:

@media(min-width: 768px) {
    .main-navigation .main-nav ul ul {
        margin-top: 20px;
    }
}

Let me know 🙂

[Tom]

Gotcha, yes I am using Hover. Okay thanks!

[Ying]

No problem 🙂

[Author]

Posts