Building a Simple Mega Menu

GeneratePress doesn’t have a mega menu by default, simply because not everyone would use it and it adds a decent amount of CSS.

However, creating a simple mega menu in GeneratePress isn’t very hard. You only need to add some CSS and then structure your menu correctly.

First, add the CSS:

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        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;
        pointer-events: auto;
        transform: scale(1);
    }

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

Learn how to add CSS here.

Over time, it’s important to check back here to make sure the CSS hasn’t been updated or improved.

Then we just need to structure the menu correctly.

Go into Appearance > Menus and create your new menu or use your existing menu.

You’re basically going to have your main parent item – the item that displays in your main navigation bar.

Then you’ll have a series of child items below this main parent item – those are your mega menu headings.

Then, your grandchild item under the child items are displayed as your links under each heading.

Here’s an example:

Mega Menu Structure
Mega Menu Structure

Now that our structure is built, open the main parent item, and give it the mega-menu class.

If you don’t see the CSS Classes input field as shown below, see this article.

Mega Menu Parent Item
Mega Menu Parent Item

Now when we save, this is our result:

Live Mega Menu
Live Mega Menu

By default, we have 4 columns.

We can adjust this by adding another class to our parent item.

These are the available column classes:

mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5

So if we want two columns, our class would look like this:

Mega Menu Columns
Mega Menu Columns