But if you’re feeling more ambitious, you might prefer to code your own mega menu into your theme. This gives you the benefit of being able to design the menu how you want it, and make sure it’s consistent with your theme.

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.

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.

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:

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:

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.

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

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.

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.

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.