How to Add a Mega Menu on Your WordPress Site



Looking to add a mega menu to your WordPress site? Mega menus allow you to add multi-column drop-down menus to your navigation with media items such as images and videos. In this video, we will show you how to add a mega menu to your WordPress site.

Mega Menus are helpful for sites that have a massive amount of content and are designed to show more content in the top menu. WordPress navigation menus by default let you add drop-down submenus and image icons but can take up a large amount of space. A mega menu allows you to bulk add items to your menu.

For this tutorial we will be using the plugin Max Mega Menu found here:

https://wordpress.org/plugins/megamenu/

With the plugin installed and activated you will want to go to the Mega Menu section to go to the plugin’s settings. The default settings for most should work but you will normally need to update the colors of the menu. To do that you will go to Menu Themes, Menu Bar, and find the menu background settings.

You can use inspect element to determine the color of your current menu. If you do not know how to use Inspect element, we cover how to in our article:

http://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

Don’t forget to save your changes to your Mega Menu settings and go to Appearance, Menus. Add some top-level menu items as you would normally add to your menu then click on the mega menu button that appears when you hover over a menu item. This will cause a new popup for editing the mega menu specific options.

In here you can add any WordPress widget that you would like to appear in your menu area. To modify the settings for a specific widget you would want to click the wrench icon in the top right of each widget.

Text version of this tutorial
http://www.wpbeginner.com/plugins/how-to-add-a-mega-menu-on-your-wordpress-site-step-by-step/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook
https://www.facebook.com/wpbeginner

Follow us on Twitter
http://twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
http://www.wpbeginner.com

source

Related posts

21 Thoughts to “How to Add a Mega Menu on Your WordPress Site”

  1. Hi, could you please tell me how to create almost exact menu like the starbucks in this video have? I mean – Multiple rows with titles etc. Right now my menu shows in one row with almost 50 sub menu items. Do I need premium plugin for this? Thanks !

  2. Superb. Clear just the right pace. Thank you

  3. Very Good It has more in it, in under 4 min. than many of the long one with no mistakes. Very helpful.

  4. How can I remove search icon from menu bar.

  5. what you showed would be the end result is nothing like what you actually demonstrated. now im even more lost. not cool.

  6. i have seen left side bar navigation menus in (w3school.com) in that website pages are switching dynamically without reloading..and side bar menu are sticky.
    is there anyway to create those menus in WordPress with elementor?

  7. I have a doubt. Can all of this happen from a free website or is a personal/premium pack needed for this?

  8. Hey, My wordpress isn't organized this way. I can't see the "appearence+" categorie in the left. Is it because I use the free version, or because they are changes since 2018? My wordpress look very limited comparated to yours.

  9. Does MegaMenu help with the menu layout? I have it right now and it's adding items the way that it wishes (i.e. filling the row and then continuing on the next line making it uneven) but is there a way i can divide the items to be equal amounts on the top row and bottom row?

  10. She does know how it works

  11. Brilliant , now I have room on top Menu for all my directory categories!

  12. I did not learn anything. thought this was supposed to be a beginner video. Now more colnfused than ever.

  13. I created the Max mega menu widget, but then when I went to place that widget in my menu in the Mega menu standard layout mode, the widget was not available in from the big list of widgets at right.

  14. Highly recomend to use Groovy mega menu. It literally took me like 15 minutes to figure out how it works and I was able to achieve a super nice menu on my site

  15. I'm sorry. It looks like every other WordPress menu. Vanilla.

  16. I was hoping the end result would be a menu, not images. Are the images supposed to be the menu items?

  17. THAT IS WHAT i SEEARCHED FOR!!!! THANK YOU

  18. Hi ! i'm using Max Mega Menu but items on level 3 don't display correctly but when I fly over the elements with my mouse it display correctly. So i would like to display that correctly before i fly over how can i do ?

Leave a Comment