WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add a Mega Menu on Your WordPress Site (Step by Step)

How to Add a Mega Menu on Your WordPress Site (Step by Step)

Last updated on May 21st, 2018 by Editorial Staff
235 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Mega Menu on Your WordPress Site (Step by Step)

Recently one of our readers asked if it’s possible to add a mega menu to your WordPress site? Mega Menus allow you to add multi-column drop down menus to your navigation with rich media such as images and videos. In this article, we will show you how to easily add a mega menu to your WordPress site.

How to Add a Mega Menu in WordPress

Why and Who Should Add Mega Menu in WordPress?

Mega Menus are particularly helpful for websites with a lot of content. This allows website owners to show more items in their top menu.

Popular websites like Reuters, Buzzfeed, and Starbucks use mega menus to display highly engaging and interactive navigation menus.

Starbucks website showing a mega menu

While default WordPress navigation menus let you add drop-down sub-menus and even add image icons next to each item, sometimes you just need a mega menu.

Let’s take a look at how to easily add a mega menu to your WordPress website.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding a Mega Menu in WordPress

First thing you need to do is install and activate the Max Mega Menu plugin. It is the best free mega menu WordPress plugin available in the market. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item, Mega Menu, to your WordPress admin menu. Clicking on it will take you to the plugin’s settings page.

Mega Menu settings

The default settings will work for most websites. However, you will need to change the menu colors, so they match the colors used by your WordPress theme’s navigation menu container.

To find out which colors are used in your theme, you can use the Inspect tool in your browser.

Using inspect tool to find out navigation bar colors

Once you get the color hex code, you can paste it in a text file to use later.

Next, you need to visit the mega menu settings page, click on the ‘Menu Themes’ tab and then click on ‘Menu Bar’ section.

Menu bar colors

Here you can replace the background color used by mega menu to match your theme’s navigation menu container.

Don’t forget to click on the save changes button to store your settings.

Now that we have configured the mega menu settings, let’s go ahead and create our mega menu.

First you need to visit the Appearance » Menus page and then add top level items to your navigation. For detailed instructions see our beginner’s guide on creating navigation menus in WordPress.

Next, on the Menus screen you need to enable mega menu by checking the box under ‘Max Mega Menu Settings’.

Enable mega menu

After that you need to take your mouse to a menu item, and you will see a “Mega Menu” button appear on the menu tab.

Clicking on the button will bring up a popup. Here you can add any WordPress widget to your mega menu and select the number of columns you want to display.

Adding widgets to your mega menu

You can also click on the wrench icon on a widget to edit the widget settings. Don’t forget to click on the save button to store your widget settings.

Once you are done, you can close the popup and visit your website to see the mega menu in action.

Mega menu preview

We hope this article helped you learn how to add a mega menu in WordPress. You may also want to see our guide on how to speed up WordPress and boost performance for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

235 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

13 Comments

Leave a Reply
  1. taufeeq khan says:
    Sep 11, 2020 at 9:53 am

    How to create content on mega menu …..for example when i click on mega menu then it open the new page of content. just like we are use home contact et.

    Reply
    • WPBeginner Support says:
      Sep 11, 2020 at 11:16 am

      For what it sounds like you’re wanting, you would want to take a look at our article below:

      https://www.wpbeginner.com/wp-tutorials/how-to-redirect-users-to-a-random-post-in-wordpress/

      Reply
  2. Hart says:
    Jan 19, 2020 at 11:44 am

    Thanks a lot this is really helpful.

    Reply
    • WPBeginner Support says:
      Jan 21, 2020 at 1:17 pm

      Glad our guide was helpful :)

      Reply
  3. Anon says:
    Jun 5, 2019 at 7:07 pm

    How to add a megamenu on your site: install this plugin

    Come on, give an actual tutorial next time. Megamenus are totally within the realm of development.

    Reply
    • WPBeginner Support says:
      Jun 6, 2019 at 10:46 am

      While there is certainly the capacity to create a custom mega menu with code, it is difficult to have that code affect every theme and be beginner friendly. We will certainly add the code for different articles when we’re able but for now, we will continue to recommend plugins that already have the code created :)

      Reply
  4. Ben says:
    Apr 29, 2019 at 7:30 pm

    Is MaxMegaMenu compatible with WPML for multilingualism? They refer to POT files, but WPML only lists MegaMainMenu on their website. Am looking for an optimal combination of theme, menu builder, and multilingual plugin – to avoid problems with integration, for fast loading, and for liability.
    Am comparing Avada, with MegaMainMenu, and WPML.
    Thanks for your time in any knowledgeable reply.

    Reply
    • WPBeginner Support says:
      Apr 30, 2019 at 10:18 am

      Sadly, you would need to reach out to the plugin’s support for if they are currently compatible or not.

      Reply
  5. Abel says:
    Feb 20, 2019 at 3:32 am

    Not helpful at all. The question is, how do you really add a post or page onto the mega menu. I dont want to add categories or widgets to the menu!!!I want to add real links to the menu

    Reply
    • WPBeginner Support says:
      Feb 20, 2019 at 11:24 am

      For specific posts or pages you would create a menu with it organized how you want and add the Navigation Menu widget to the mega menu :)

      Reply
  6. Jay says:
    Jan 2, 2019 at 2:05 pm

    Two beginner’s questions: Does Mega Menu work with any WordPress theme?
    &
    Does Mega Menu allow for multiple mage menus?

    Reply
    • WPBeginner Support says:
      Jan 2, 2019 at 2:34 pm

      It should work on most themes. If you reach out to the plugin’s support they should be able to let you know of any conflicts.
      You can have more than one mega menu if that is what you mean with your second question.

      Reply
  7. Nick says:
    Feb 12, 2018 at 2:53 am

    Max Mega Menu is hand down the best plugin for what it does. As a customer to the premium version let me say that it is well worth the money, and reasonably priced. The developer is very friendly and helpful too which is always a big plus.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
PushEngage
PushEngage
Increase your website traffic & revenue with push notifications. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
WP Courseware
WP Courseware Coupon
Get 30% OFF on WP Courseware WordPress learning management system plugin.
Astra WordPress Theme
Astra Theme Coupon
Get 10% OFF on the purchase of Astra WordPress Theme.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.