[Resolved] Problem with the Mega Menu documentation

[Samuel]

Hi,

I have Problems with the Mega Menu documentation. I followed these instructions: https://docs.generatepress.com/article/building-simple-mega-menu/

This is my css class: mega-menu mega-menu-col-3

So the first Problem: there are still two columns https://www.screencast.com/t/NzoApH7BrB

The structure of the menu looks like this: https://www.screencast.com/t/CP0CJb2j4Oae

The problem only occurs when I enable the “Click” elements. With the simple mouse hover function I have three columns: https://www.screencast.com/t/z2hOhoXy

Is it possible to extend the Mega menu to a width of 1200 pixels? So as wide as the main element?

[David]

Hi there,

yep the Mega Menu works best with the Navigation as Header. With your layout try this:

@media (min-width: 769px) {

    .inside-header {
        position: relative;
    }

    .main-navigation .inside-navigation,
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu > ul > li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2 > ul > li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3 > ul > li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5 > ul > li {
        width: 20%;
    }

    nav .main-nav .mega-menu > ul > li: hover > a, nav .main-nav .mega-menu > ul > li: focus > a, nav .main-nav .mega-menu > ul > li[class * ="current-"] > a, nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

[Samuel]

Thank you. I am curious about future solutions with Gutenberg. I find the current GP-solution for menu design a bit complicated. I prefer to think in columns…

[David]

We’re waiting to see a stable release of the Navigation Menu block in core WP.
Once thats landed we can see how that can be interacted with… i don’t hold much hope that it will be easy to make it into a mega menu, leaving the options for Plugins or similar CSS to the above.

[Samuel]

Good to hear. I think WP 5.9 will be a great update. Let’s see…

Is there any news when the new GP version will be released?

[David]

I believe we’re on schedule for the end of this month for the Alpha releases.

[Author]

Posts