[Support request] Empty space in mega menu

[webintas]

Hi there,

I am using the mega menu here: https://docs.generatepress.com/article/building-simple-mega-menu/

However, there is some spacing/gap in the menu that looks bad You can see it here: https://i.gyazo.com/e26e4ffd45890ffc2d0135b43e52e31c.png

How can I avoid that?

Best Regards,
Peter B. Stidsen

[Tom]

Hi there,

Do your sub-menus look like the first screenshot in that article?

I’m only seeing one level of sub-menu in your menu, instead of seeing multiple parent/sub-menus.

Let me know 🙂

[webintas]

Hi again,

Yes. I styled the colors, so it looks like this now: https://i.gyazo.com/5e4ddd4fc04075e1cdd1a4f1e5e5ffff.png

[David]

Hi there,

simplest way would be to change the order of those menu items.

Move Info-materiale om ELN before Værd at vide

[webintas]

Hi David

Thanks for your reply. I see. That’s a fix. However, it’s important to me and my client that the menu order is in the way it is now.

How can we achieve that?

/ Peter

[David]

You can do this:

1. Edit the Info-materiale om ELN menu item and give it a CSS Class of: lift-menu-item

Adding CSS Class to Menus: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

2. Add this CSS:

@media(min-width: 769px) {
    .main-navigation ul ul li.lift-menu-item {
        margin-top: -75px;
    }
}

Please note, any changes to the menu items, eg. adding items or removing them may require this CSS to be edited.

[Author]

Posts