Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

An Easy Way to Code a Mega Menu in WordPress

by
Difficulty:IntermediateLength:MediumLanguages:
Final product image
What You'll Be Creating

In a previous post, I looked at how to decide when a mega menu is right for your website and how to use a plugin to create one.

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

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:

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:

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:

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:

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:

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.

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:

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:

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.