When using Neve as your WordPress theme and you want to spice up your Primary Menu with a Mega Menu, then you should follow these steps:
📥 Download the theme (free): http://bit.ly/NeveWPTheme
We’ve made it easy to set up a basic mega menu within the theme itself by using CSS classes.
🕐 0:23 – Start by accessing the Menus settings under Appearance on your dashboard, or go to Customizer, and then navigate to Menus.
I stay on the dashboard where the first thing you need to do is to open the screen options above and make sure CSS Classes is checked.
Remember that the mega menu is only available on the Primary Menu. Doing this for other menus might yield unexpected results.
🕐 1:13 – Now, go ahead and create a custom link, use the hash symbol for the URL, and name it Mega Menu. You can type in just Menu or another word as well, 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” in the specific field right here.
Now, click on the plus sign over here and choose an icon for this element and then drag it wherever you want. If you don’t see the plus button on the left side of your menu elements, go to plugins, install Orbit Fox and enable the Menu Icons module.
Cool.
Let’s go back to our menu settings.
Now that we have our root element set up, we will be adding the four columns to our menu.
🕐 2:06 – Go ahead and add four custom links to the menu. The URL should be the same symbol, again, 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.
I am going to name the first one col-1, then col-2, col-3 and so on.
Make sure you add the “neve-mm-col” class to all four of them.
To create menu elements faster, install the Nav Menu Item Duplicator plugin and then you will see this “duplicate” link below.
Make the first column element children under the Menu root item and then click on duplicate three times. Type in col-2 for the second column, col-3 here and then col-4 in the last one.
If you did it right, you should end up with something that looks like this, and here is how it looks on the front end.
🕐 3:15 – Now we can create headings for each column.
Bear in mind that headings can also have a link, but it’s not required. They can be used as a presentation mean as well.
Go ahead and create four more menu items that will be acting as headers: Category 1, Category 2, Category 3 and Category 4.
If you have an e-commerce site you can see product categories over here which you can use as headings.
I don’t want to link them to anything, so I’ll just stay with the hash symbol as the URL. Make sure that you add “neve-mm-heading” under the CSS Classes for each of them and place them inside the previously created columns as children again.
You should be looking at something like this, right now.
And if we preview what we have done so far, this is how our menu looks like right now.
Cool.
🕐 4:24 – Now we can add some more things, and I am going to add the dividers you see under each of the headings.
Keep in mind 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 the hash symbol with the link text “divider”.
🕐 5:00 – Now we can finally add the basic menu items.
These elements can be added just like you do with a normal menu.
You can add products here, for example.
The only thing you want to do is have them as children of the columns placed right under the dividers. Fast forward, after adding some items, this is what we get on the front end as our final mega-menu. I was using custom links for demo purpose but you can use products, pages, posts or other items as well.
It looks great, right?
🕐 5:44 – Now we can add icons to each element one by one and we can use the search bar to filter out what we need. For example, I want an arrow for this element so I will type in arrow over here then I will choose this icon.
📁 Documentation: https://docs.themeisle.com/article/964-neve-mega-menu-setup
Website → https://themeisle.com
WordPress Articles → https://themeisle.com/blog/
Facebook → https://www.facebook.com/themeisle/
ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We’re passioned about all things WordPress, but we’re not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone.
