Archived topic

Problem with the Mega Menu documentation

5 replies · Started by Samuel on August 20, 2021

Viewing posts 1–6 of 6

August 20, 2021 at 1:33 am #1902198

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?

August 20, 2021 at 5:29 am #1902372

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;
    }
}

August 20, 2021 at 6:04 am #1902405

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...

August 20, 2021 at 7:54 am #1902703

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.

August 21, 2021 at 12:11 am #1903278

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?

August 21, 2021 at 4:51 am #1903426

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

This archived topic is closed to new replies.

Start building better websites today.