Neve Mega Menu Setup

📝 Note: This is only available on the Primary Menu. Doing this for other menus might yield unexpected results.

📌 Elements Anatomy

We have styled specific classes to allow users to create beautiful menus directly from the dashboard. These classes are listed below, along with relevant examples.

- neve-mega-menu - this class acts as a wrapper for the mega-menu.

- neve-mm-col - this class is a wrapper for the columns of the menu. The contents are not shown, this is just a wrapper.

- neve-mm-heading - styles the item as a heading. The contents are shown and can also have a link.

We also have an element called  divider. You can insert one between your menu items by simply adding a menu item with a link value of # and with the title divider. 

Link descriptions also show up. So anything you insert in the Description field of the menu item will be shown right below it.

🛠 Creating the menu

This functionality can be extended to much more than this, but for demonstration purposes, we will reproduce the example above.  

1

Go under Dashboard > Appearance > Menus. 

2

Click on Screen Options at the top and make sure that the CSS Classes option is enabled. If it's not, make sure you enable it. 

3

Inside the Edit Menus area, click on create a new menu.

Basic Menu Items

Basic menu items can be added just like you do with a normal menu. The only thing you want to do is have them as children of the columns. After adding some items, this is what we get on the front end and the final menu structure: 

The Root Item

First of all, we're going to add the root element to the menu. Click on Custom Links and use # for the URL and Menu for the link text. Then click on Add to Menu. Make sure that after you've added the Item to the Menu, you add the class neve-mega-menu to it, just like in the image below.

The Columns

Now that we have our root element set up, we will add the four columns to our menu. 

Go ahead and add  four custom links to the menu. The URL should be #, and the link text should be suggestive - remember that these show up in the dashboard but don't show on the front end of the site because they are just wrappers. We will name them col-1, col-2, col-3, and col-4.

Make sure you add the  neve-mm-col class to all four of them, just like we did for the root Item. And then make them children under the Menu root item. If you did this right, you should end up with something that looks like the image below.

Headings (optional)

Remember that headings can also have a link, but it's not required. They can be used as a presentation mean as well. If you don't want them to act as links, you should make theim point to #.

Go ahead and create  four more menu items that will be acting as headers: Seating, Tables, Cabinets, and Mirrors. I don't want to link them to anything, so I'll add # as URL. Make sure that you add neve-mm-heading under CSS Classes for each of them and place them inside the previously created columns as children. You should be looking at something like the image below.

Dividers (optional)

I'm going to add dividers under each of the headings. Remember that these can be added anywhere and not only under the headings. 

Adding a divider is as simple as adding a Custom Link item, pointing to # with the link text divider.

🎥 Video - Neve Mega Menu