[Resolved] Make CSS megamenu

[Jasper]

added som links, but i don’t notice a different behavior

[Tom]

Seems to be working for me?: https://www.screencast.com/t/zWHGyBVO1s8R

[Jasper]

well it works, but i would like the mega menu to stay open and show the menu items which correspond to the parent-item. Now it closes when i move away the mouse.

[Tom]

For it to stay open even when the mouse leaves, you would need to use the Click – Menu Item option for the dropdown type: https://docs.generatepress.com/article/navigation-dropdown/

Showing the menu items corresponding to each parent menu item requires you to add those items as children to those parent menu items as shown in the mega menu article.

[Jasper]

When i select ‘click-menu item’ it does stay open but the page linked to that menu item is not opened.

[Jasper]

I would like it to behave like the menu on this page: https://designaldente.nl/index.html

and to make it more complex, also as a the sticky menu

[Tom]

Ah, you’re not looking for a mega menu then.

One option there would be to use the Secondary Navigation add-on, and use a plugin like this to change what menu items display on certain pages: https://en-ca.wordpress.org/plugins/conditional-menus/

[Jasper]

I can see what you can achieve with those options, but it has a big advantage. It is not 1 menu anymore, so on mobile i get 2 hamburgers. It gets complicated that way.

Is it not possible to and jump to the corresponding page and open the mega menu? it seems a lot easier and more user friendly.

Probably best solution is to change the page layout so the parent item is not linked to a page (or section) anymore.

[Tom]

Hmm, you might be able to do something like this:

@media (min-width: 769px) {
    .main-navigation .current-menu-item ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
    }

    .main-navigation .current-menu-item .dropdown-menu-toggle {
        display: none;
    }
}

Untested, just an idea.

[Jasper]

i dont’t notice any difference in behavior with that css

[Tom]

Right now it looks like you’re using Elementor to build your nav as well.

If you remove that, set GP dropdown type to hover and then try the CSS, it should work.

[Jasper]

Thanks Tom, it is starting to look good. Because the togglesymbol is not displayed the menu item spacing is a bit off.
I have stickymenu enabled, and the mega (or sub) menu becomes too wide when menu is sticky. Any solution for that?

[Tom]

Unfortunately there’s no way to tell it not to be full width when sticky, as the sticky element needs to take on that width.

However, you could change your CSS to this which might help:

@media (min-width: 769px) {
    .main-navigation .current-menu-item ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
    }

    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 12px;
    }

    .main-navigation .current-menu-item .dropdown-menu-toggle {
        display: none;
    }

    .navigation-stick .main-nav .mega-menu > ul {
        top: 75px;
    }
}

[Jasper]

thanks, so i skip the sticky option i guess. Thanks for the css, it looks fine now.

[Tom]

No problem 🙂

[Author]

Posts