An Easy Way to Code a Mega Menu in WordPress

In this tutorial, I’ll show you how to code a mega menu and add it to your theme.

What You’ll Need

To follow along with this tutorial, you’ll need the following:

  • A development installation of WordPress (don’t add this to your live site until it’s all working correctly).
  • Your own theme that you can edit, or if you’re using a third-party theme, a child theme for that theme.
  • A code editor.

I’m using a third-party theme (ColorMag), so I’m going to create a child theme of that and add my styling to that.

How the Mega Menu Works

Our mega menu will take the code output by the menus system in WordPress and display it as a mega menu. I won’t be adding an additional menu to the site: you could do this if you wanted to, but as this mega menu won’t work on smaller screens, I prefer to stick to the same menu. This is because I like to give users on mobile and on desktop access to the same navigation.

The mega menu will be styled to only work on larger screens. For smaller screens, I recommend using a burger menu, which is invisible until the user taps on a burger (three horizontal lines) icon. You can find out how to code a burger menu in our tutorial on coding a burger menu.

  • WordPress
    Code a Burger Menu for Mobile Users in WordPress
    Rachel McCollin

Getting Started

The first step is to add plenty of menu items to your menu. This means you will have lots of content to fill your mega menu with.

I’ve added lots of links to my menu, with three levels of navigation. When the user hovers over a top-level menu item, the items below that will appear in a mega menu. Right now, they appear in the standard layout:

a menu in WordPress with three levels of links Each level appears when the user hovers over the link above it in the structure

Let’s start by identifying the code that’s output by this menu in the front end of the site. Here’s the (edited) code for my menu. I’ve taken out some of the li elements and removed most of the CSS classes so you can see the structure of the HTML:

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
    <div class="inner-wrap clearfix">
				
        <p class="menu-toggle"></p>
        <div class="menu-primary-container">
            <ul id="menu-main-nav" class="menunav-menu" aria-expanded="false">
                <li><a>Home</a></li>
                <li>
                    <a>Top Level Item</a>
                    <ul class="sub-menu">
                        <li><a>Second Level Item 1</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 1</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                        <li>
                            <a>Second Level Item 2</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 5</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                        <li><a>Second Level Item 3</a>
                            <ul class="sub-menu">
                                <li>
                                    <a>Third Level Item 7</a>
                                </li>
                                <!-- more li elements -->
                            </ul>
                        </li>   
                    </ul>
                </li>
                <li>
                    <a>Another Top Level Item</a>
                    <ul class="sub-menu">
                        <li>
                            <a>Second Level Item 4</a>
                            <ul class="sub-menu">
                                <li><a>Third Level Item 12</a></li>
                                <!-- more li elements -->
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

There’s a lot of code there, but I recommend taking a moment to study it as it helps us identify the classes and elements (and sub-elements) we’ll need to target with CSS in order to create our mega menu.

We can use the CSS classes generated by WordPress to style our mega menu and to ensure it’s laid out correctly. We’ll use a media query to ensure that the menu appears only on screens that are large enough.

The specific elements we’ll be targeting are:

  • .main-navigation
  • ul elements beneath that (including ul ul and ul ul ul)
  • li and a elements inside the ul elements.

On smaller screens, I’ll make the default menu visible, although I recommend using a mobile alternative such as a burger menu on very small screens. My theme already has a burger menu coded into it for small screens, so I don’t need to worry about that.

Note: the HTML output by your theme will be similar to mine as it’s generated by WordPress. But there will be differences, such as the class or ID of the main navigation element. It pays to check it first, just to be sure.

Setting Up the Media Query

The first step is to add a media query for the mega menu styling (if you need it). In your theme’s stylesheet, add this:

@media screen and ( min-width: 500px ) {

}

You can change the min-width value to whatever works on your theme and corresponds to the media queries already present for any burger menu.

Styling the Layout

My existing menu is styled so that third-level items are only displayed when I hover over the second-level item immediately above them. I want to change this so that all menu items appear. I’ll then style them so that they’re laid out correctly.

Let’s start by making second- and third-level menu items visible when the user hovers over the top-level item.

Add this to your stylesheet, inside the media query:

.main-navigation ul:hover li ul,
.main-navigation ul:hover li ul li ul {
    display: inherit;
}

Now, when you refresh the page and hover over a menu item, it looks a bit like this:

second and third level items are visible but a mess

The second- and third-level items are visible, but they look very messy, to put it mildly. Let’s fix that.

We’ll do that firstly by making the li element under each top-level item full width. To make this work, we’ll have to remove any relative or absolute positioning for elements above those by making them static. We’ll also add display:inherit to ensure lower-level menu items are visible when the top-level item is hovered over.

Add this to your stylesheet:

.main-navigation {
    position: relative;
}
.main-navigation li {
    position: static;
}
.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}
.main-navigation ul li:hover ul li ul {
    display: inherit;
    position: relative;
    left: 0;
}

The menu now looks like this:

It’s full width, but we need to do something to improve the layout. Let’s add a float to the second-level lists so that they appear next to each other.

Add this to your stylesheet:

.main-navigation ul li:hover ul li {
    float: left;
    position: static;
    display: block;
    padding-top: 1em;
}
.main-navigation ul li:hover ul li ul li {
    float: none;
    padding-top: 0;
}

Now the menu is looking better:

menu with second level lists floated to the left

The float is working, but the background color is off. Edit your styling for the .main-navigation ul li:hover ul element to add background styling. The specific color you use will depend on what your theme is using.

.main-navigation ul li:hover ul {
    display: inherit;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #bababa;
}

Now the menu looks better:

the mega menu with a gray background

Let’s add some color and layout styling to the individual lists, to make the second-level items more prominent. Add this to your stylesheet:

.main-navigation ul:hover ul li a:link,
.main-navigation ul:hover ul li a:visited {
    color: #b01b1b;
    text-decoration: underline;
}
.main-navigation ul:hover ul li ul li a:link,
.main-navigation ul:hover ul li ul li a:visited {
    color: #fff;
    text-decoration: none;
}

This makes the lists look better, with second-level items being underlined and red. Feel free to amend these colors to fit with your theme.

second level items are now red and underlined

Finally, let’s remove the top margin on third-level items so they are bunched together more closely. Edit the code for them as follows:

.main-navigation ul:hover ul li ul li a {
    padding-left: 1em;
    padding-top: 0;
}

Now the menu looks much tidier:

the final mega menu with lists neatly laid out next to each otther

We now have a functioning mega menu, using the main navigation menu from our theme.

You Don’t Need a Plugin to Create a Simple Mega Menu

If you want to create a simple mega menu using the contents of the WordPress navigation menu, this technique will let you add one to your theme without too much extra code.

However, if you want to add extra features such as custom styling and images, using a plugin will probably be quicker. You’re sure to find one that meets your needs in our list of the top mega menu plugins.

  • WordPress
    UberMenu and 7 Other Best Mega Menu Plugins
    Jane Baker
  • WordPress
    How to Make a Sticky Menu in WordPress
    Rachel McCollin
  • WordPress
    When to Use (and Not Use) a Mega Menu for Navigation
    Rachel McCollin
  • WordPress
    How to Make a Drop-Down Menu in WordPress
    Rachel McCollin

Source:: Net Tuts