[Resolved] Mega Menu

[Nicole]

I am trying to build a mega menu.
I have followed the instructions here but I don’t have an option to enter a CSS class as per the instructions.
Could it be an issue with my version of WP or GP?

[David]

Hi there,

you have to enable the CSS Classes field in Appearance > Menus –> Screen Options – see here:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

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

[Nicole]

Great! Thanks! That solved it!
Is it possible to add a bit of padding to the top or do something to prevent the logo from covering the menu?

I have set the mega menu to the second drop down from the left but the digital planner is covered by the logo.

[Ying]

Hi Nicole,

Try this css:

@media(min-width: 769px) { 
nav .main-nav >ul li> ul {
    top: 80px;
}

nav .main-nav >ul >li> ul:before {
    content: "";
    position: absolute;
    top: -40px;
    height: 40px;
    width: 100%;
}
}

[Nicole]

Worked perfectly! Thanks!

[Ying]

No problem 🙂

[Author]

Posts