How To Build A Mega Menu In Hestia WordPress Theme

This video is a step by step guide on how to create a Mega Menu like this if you are using the Hestia WordPress theme You will learn exactly what to do and even how to spice things up a little bit with intuitive icons

We've made it easy to set up a basic mega menu within the theme itself by using classes ”hestia-mega-menu” acts as a wrapper for the mega-menu The ”hestia-mm-col” class will generate the wrapper for the columns of the menu And the ”hestia-mm-heading” will be the items that will display the title of each column We also have an element called divider Remember that what you will see in the next minutes can be used only for the Primary Menu of the Hestia WordPress theme

Doing this for other menus and with other themes might yield unexpected results Go under Dashboard > Appearance > Menus Click on Screen Options at the top and make sure that "CSS Classes" option is enabled If you already have an active menu, just go ahead an edit that menu Otherwise, create a new menu by clicking on create a new menu here

Name it then click Save Menu Next, we're going to add the root element of 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 type in the ”hestia-mega-menu” class in the specific field

Now that we have our root element set up, we will be adding 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 will 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 them col-1, col-2, and so on

If you want to do things faster, install the Nav Menu Item Duplicator plugin and then just duplicate an item which you need more than once, like so Make sure you add the "hestia-mm-col" class to each item, just like we did for the root Item And then move them slightly to the right, under the Menu root item

If you did this right, you should end up with something that looks like this 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 If you don't want them to act as links, you should make them point to # Go ahead and create four more menu items that will be acting as headers: Category 1, Category 2, and so on

I don't want to link them to anything, so I'll just add # as URL Finally, make sure that you add "hestia-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 this after you save the changes

I'm going to add dividers 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 # with the link text "divider" 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 will look like so Install the Orbit Fox WordPress plugin which will generate a plus sign on the lefts side of your menu items, on your dashboard When you click on that, you will see a list of icons you can choose to add to the left side of your item name

Add Home here, a menu icon here, arrows to each category and so on You can use the search function to filter the icons by typing in a specific keyword, like "map" for example If you have a contact page in the menu, search for envelope or email and add any of those intuitive icons to the menu item Continue adding icons until you finish then remember to check the Primary Menu here before saving the changes Now everything should be working as the demo I was showing you at the beginning of this video so, let's check it out

Yes, it's working perfectly, and you can use this kind of menus on your e-commerce website, for example, or in any project that involves multiple categories Thanks for watching!

Free Email Updates
We respect your privacy.

wordpress themes free

affiliate marketing