How To Create A Divi Mega Menu (Without Plugins) Tutorial by Pee-Aye Creative

How To Create A Divi Mega Menu (Without Plugins)

Learn how to create a Divi mega menu without plugins and how to style and customize the design of the mega menu with CSS.

What Is A Divi Mega Menu?

When a normal Divi menu item has additional menu items underneath it, we call those sub-items a submenu. So think of a mega menu as a set of multiple submenus side by side. We can create a mega menu by setting up our menu in such a way that it has multiple sets of menu item tiers. This is useful when we have a lot of items to put in our menu, or we just want to nest certain pages or sets of pages in a specific way. You can also use a mega menu to advertise products, featured services, or blog posts.

We wrote all about how to style the Divi submenu in a recent tutorial, so go check that out. It will definitely help you understand and style the mega menu!

Set Up The WordPress Menu

Creating mega menu in Divi starts with setting up the WordPress navigation. You can add whatever menu items you want, that’s not important. The important part is that you set it up in the correct order of hierarchy.

Setting up your Divi mega menu navigation

Here’s how that looks by default. The parent menu item has four submenu items under it.

how to make a Divi mega menu without plugins

Add The Mega Menu CSS Class

This is how the standard menu works, but in order to create a mega menu, we need to add as secret CSS class to the parent item.

NOTE: Be sure you have “CSS Classes” checked under “Screen Options” in the upper right corner of your admin screen.

add mega menu css clas to Divi menu

Here’s how it looks now that we added the “mega-menu” CSS class to the parent menu item:

preview of the Divi mega menu creation in progress

Add Additional Submenu Items

Next, proceed to add all your submenu items underneath each “column.” You can add as many as you need. In my example, I added three under each column.

structure of the menu items for the Divi mega menu

Here’s how your Divi mega menu looks! 

how to creat a Divi mega menu

How To Style The Divi Mega Menu

Now that we have created our Divi mega menu, we need to customize how it looks. To do this, we need to use CSS since there are no built-in settings for this in Divi. The cool part is that we can base our CSS off of our Divi submenu tutorial since many of the classes are the same.

  • Unordered List
  • List Item
  • Link

This still holds true! The only difference now is that each of the submenu list items now have an unordered list underneath them.

How To Customize And Style The Divi Mega Menu Submenu

You can do some things in the module settings, such as the background color. But to do anything beyond that, you can use our snippets and suggestions shown below to style and customize the Divi mega menu submenu.

How To style the Divi Mega menu

Edit The Overall Mega Menu

This would be exactly like our submenu tutorial, but remember, we added the class “mega-menu” to the list item.

/*edit the Divi mega menu*/
.et_pb_menu li.mega-menu ul {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style overall mega menu submenu. You can choose to do this by placing the snippets shown below into the selector for the mega menu shown above.

Add a border:

border: 2px solid #2cba6c;

Make the corners rounded:

border-radius: 10px;

Adjust the spacing:

padding: 0px;

How To Customize And Style The Divi Mega Menu Submenu First Row

The next thing you may want to customize and style with the Divi mega menu is the first row. You don’t have to do this separately than the other list items, but it often works out well. You can see our site menu for an example of this in action.

How To style the first row of the Divi Mega menu

Edit The Mega Menu Submenu First Row

To do this, we are taking the CSS class for all the menu list items and adding a new special pseudo class called “first-child” which only targets the list items in the top row.

/*edit the Divi mega menu submenu first row*/
.et_pb_menu li.mega-menu > ul > li > a:first-child {
YOUR CSS HERE
}

Edit The Mega Menu Submenu First Row On Hover

/*edit the Divi mega menu submenu first row on hover*/
.et_pb_menu li.mega-menu > ul > li > a:first-child:hover {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the first row of mega menu submenu list items. You can choose to do this by placing the snippets shown below into the selector for the mega menu shown above.

Add a border:

border-bottom: 2px solid #2cba6c;

Change the background size:

background-color: #2cba6c;

Change the text color:

color: #ffffff;

Change the text size:

font-size: 24px;

Adjust the font weight:

font-weight: bold;

How To Customize And Style The Divi Mega Menu Submenu List Items

You may be wondering why the tutorial ends here? That’s because we’ve already covered how to style and customize the Divi submenu in our other tutorial (that we keep talking about), so we don’t need duplicate content. You can now go and use that tutorial for anything related to the list items and links, and they will work perfectly here in the Divi mega menu.

You may also want to add images to your mega menu. You can do that with another tutorial about adding images to the Divi menu.

55
Last updated Jan 3, 2021 @ 1:05 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

70 Comments

  1. Thomas

    Thx for this very good tutorial! I would like to see something for the mobile menu with nested childs? Is ther something existimg i could use?
    Best Regards,
    Thomas

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Thomas, I’m definitely going to do a mobile menu tutorial, since a lot of people are asking this. But as of now, I don’t have anything on it to recommend. Should be out before too long 🙂

      Reply
  2. Guillermo

    Thank’s Nelson, great video.

    Regards

    Reply
  3. Jenn

    This is great! CSS is not my strong point, so I really appreciate the explanation to understand what each code piece does so I can change what I need to change to make it look how I want it to look on my site, instead of just following a tutorial to make it look just like ‘yours’.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      That’s awesome to hear Jenn. I had received feedback before that others liked this style that I first used on the submenu tutorial. I hope to do a similar one for the mobile menu.

      Reply
  4. Shahzad Raza

    Thank’s Nelson for writing useful content on Mega Menu.

    Reply
  5. La Chacra

    Not sure what I am doing wrong but I do not see the “mega menu” option under: Menu settings>Content
    The only options are to select a menu. was this option removed or relocated. I am running the latest version of Divi (4.4.2)

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hello, I’m confused because I haven’t said anything like “Menu settings>Content”, I don’t know what you mean by that. You need to add “mega-menu” CSS class to your menu item. Follow the tutorial closely and use the video if it helps and you will get it!

      Reply
  6. Vikas

    Hello Nelson,

    Thanks for the above. I am a non technical person.

    I got the CSS snippets etc but I do not understand where shall I add them.

    Like for example.. I am going to Appearance- Menus- CSS Class… do I add these there?

    As I can not think of any page which opens the menus module here.

    By the way, I do have an existing mega menu but not customized.

    Appreciated.

    Reply
  7. Snake

    Hi,
     
    I couldn’t get this to work using .et_pb_menu as this class doesn’t seem to exist.
     
    I have used #top-menu instead, which is working.
     
    However, I just cannot get the hover settings to change.
     
    this works
     
    #top-menu .mega-menu ul li a {
    background-color:#BD282A!important;
    color:white;
    }
     
    but this doesn’t
     
    #top-menu .mega-menu ul li a:hover {
    background-color:#BD282A!important;
    color:white;
    }
     
    any idea why?
    yes I have cleared my server cache, and browser cache.
     

    Reply
  8. Segun

    Thanks for this great tutoria. i really like the way you explained it step by step. But is there a way to make the mega menu parent items displayed vertically while the sub-menu display in horizontal manner. Like the one in this picture?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Segun, I may be missing something because yes, that is exactly how this tutorial and mega menu works. The one thing that may be different, it looks like the image is using a vertical menu, which I have no experience in. Can you help me understand more of what you need or what isn’t working?

      Reply
  9. Kevin

    Hey Nelson. Thank you for the tutorial. Very helpful. I’m wondering if there’s a way to make it display more than 4 columns? I have a five column menu and the fifth column wraps to column 1.

    Reply
  10. Kaos Polos

    Thankyou Nelson,

    Can we create mega menu like this (attached)

    So, when we hovering menu, they show content of that category

    Example, I have a blog, my menu is like this:

    HOME
    Health (category)
    Auto (category)
    Lifestyle (category)

    When I hovered Health, they will show newest (or randomly) post from health Category. Can we?

    Reply
  11. Ian Knight

    Hi Nelson,
    I found these menu tutorials to be quite helpful, and it’s changed the way I create my menus and style them. So thanks for that.

    I have a question about the styling of the Mega Menu when I only want to use two columns. Normally the MM is set up for 4 columns, so when only 2 are used, they stretch to fill the space of 4 columns.

    Is there a way to reduce the width of the MM so that it doesn’t stretch the entire width of the page? I think that’s the default design, but it looks odd in this case. Lots of wide spacing that’s not needed. The page width is 1080, I think. And somewhere about 600px should be all that’s needed. Site is ianrobertknight.com

    Reply
      • Ian Knight

        Oops. Check again? I’ve shut that off.

      • Ian Knight

        Hi Nelson,
        I turned off the right-click block last week, after your comment. Have you had a chance to look?

  12. Francesco schinaia

    Hi Nelson!
    the MM you show becomes all HTML? I’m reading that many MM made with plugins give problems with seo and that it is better to build them all in HTML .. the one of DIVI I think is good. http://www.etc14.eu

    Is there in DIVI a way to add a third level and collapse the second level voices?
    similar at the mobile menus I mean ..?

    Best Regards
    Francesco

    Reply
      • Francesco schinaia

        hello I hope to be able to explain. I know that Google does not like menus and megamenus made with javascript, and prefers html menus, lists (ul li) to be read immediately and not to be understood after rendering all the js. I was wondering if the megamenu created with DIVI was read immediately by google or not ..
        The Megamenu done with DIVI is very simple and has limitations for me.
        I tried to use a plugin to build Megamenu but I see that it inserts some code using :AFTER elements ..
        So if the DIVI Megamenu is good (and I was asking you for confirmation) .. maybe it’s better to accept its limits and do something simpler.

        I wrote a lot to have a clearer google machine translation ..

        Thanks for your attention
        Best Regards
        Francesco

  13. Max

    Hello, as you can see from the attached image, I have a problem with the margins of the 4 columns of the mega menu that has been created by default. In practice this happens:
    1) the left margin remains narrow while the right one is wide and I cannot balance them;
    2) each column seems too narrow and the sentence breaks.

    thanks for an answer, Max

    Reply
  14. Jason L Carlson

    Great tutorial as usual! I’ve been trying to figure out how you achieve the mega menu like you guys have under “website services”? I even did the elegant themes dropdown tutorial and tried to modify but I can’t figure it out. I worked on this for 2 days and nothing.

    Will you please enlighten me?

    Thank you so much!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Jason,
      Sure, so everything in my mega menu is in this tutorial and our menu module tutorial series. For example, adding icons and the image are separate tutorials that work for the menu but also apply to the mega menu. Was there something specific you are curious about?

      Reply
      • Jason L Carlson

        Thank you for getting back to me so quickly! I watched your tutorial and it’s great. However, I’m not using the MENU method. I’m using blurb modules like on Elegant Themes menu, but I need 2 modules side by side on one hover. When you hover over DIVI on their site you’ll see what I mean. Since yo’re like the DIVI guru I figured you’re the person to ask LOL. It’s gotta be something really simple that I’m overlooking…

      • Jason L Carlson

        Yes – I did that tutorial. In the tutorial the menu they create IS DIVI and they use the Blurb module for the links It just doesn’t explain how to have two of them side by side on hover. That’s what I’m trying to figure out.

      • Nelson Lee Miller (aka The Divi Teacher)

        Oh my goodness, you have to be kidding me! They use the Blurb module? Wow. Wow. Do not follow this tutorial. There is a tutorial out there on how to recreate this in Divi, wow. All you need to do is add the image/icon and a second line of text. I have tutorials for those that get you close. I’m just in awe that Elegant Themes published that! haha

  15. Kanarito

    Thanks for the tutorial, it looks great. I would like to be able to remove the headers from each column and only see the sub-items, would this be possible? 

    Regards

    Reply
  16. Kanarito

    I finally got it by adding this line to the code you provided. 

    display: none !important;

    Thanks again, without that code pointing to the row I couldn’t have done anything 🙂

    Best Regards,
    Jesus

    Reply
  17. wallace dobson

    Hi Nelson Is its better to create the menu in theme builder using the menu module or set up the menu vi the theme customiser thanks another enjoyable tutorial

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Wallace,
      I guess that answer is “it depend” but my personal recommendation is to avoid the customizer and use the Theme Builder as much as possible since that is the future of Divi, so may as well get used to doing it that way.

      Reply
    • Hemant Gaba

      Could you please add the URL of the page for us to investigate ahead on the issue as the screenshot is not accessible?

      Reply
  18. Alexis

    Hello dear Nelson. Thank you so much for your tutorials!
    I implemented the mega menu on my site, works great but I still have issues to cusomize.
    .et_pb_menu li.mega-menu ul {}
    does not respond on my site. What could be the reason?

    I also wonder if you made that tutorial on how to adapt the mega menu on mobile, especially how taking away the images in the menu on mobile.

    Thank you so much! Love what you’re doing!
    Alexis

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Alexis,
      Can you explain what you want to do with the ul? As for mobile, I guess media queries are the only option. Or you could use something like the feature in our Divi Responsive Helper to show or hide certain menu items per device.

      Reply
  19. Ryan

    Hey! Thanks for the post. Any tips on eliminating the giant spacing below the sub menu lists?

    For example, see the procedure dropdown – https://integrated.webpossible.net/

    Reply
    • Hemant Gaba

      Could you please try adding this CSS snippet given below and let us know if that helps or not?

      ul#menu-mega-menu li .sub-menu {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      }

      Reply
  20. Vincent (Digiscrap)

    Hello,

    Thank you so much for this tutorial!! It works great and is looking fine for 99% 😉

    Only 1 questions: how to set nowrap to (all) menu items?

    Thanks,
    Vincent

    Reply
    • Hemant Gaba

      I am not sure that I totally understand the query but please try using this code below if your Menu items are going in the different line and you want to restrict that:

      .et_pb_menu li.mega-menu ul{
      display: flex;
      flex-wrap: nowrap;
      }

      If in case the Menu item is breaking because it’s a long word and you want to restrict that breaking then you can use this code:

      .et_pb_menu li.mega-menu ul li a{
      white-space: nowrap;
      }

      The selector of these code snippets is inspired by the selector given in the guide so please make sure that you have placed them right.
      If this doesn’t solve the issue then provide us with the URL so that we can investigate further.

      Reply
  21. hot demo

    hi thanks for this tutorial

    .et_pb_menu li.mega-menu > ul > li > a:first-child {

    }

    this is the code for first row of submenu

    can you tell me the code for second row to customized it

    .et_pb_menu li.mega-menu > ul > li > a:secondchild {

    }
    i am trying with this code but nothing is happen

    Reply
    • Hemant Gaba

      There is no pseudo-class like :secondchild, to select the first and last child we have the pseudo-class :first-child and :last-child respectively but to grab the children in the middle we use the pseudo-class called :nth-child().
      So the code for the second child will be:

      .et_pb_menu li.mega-menu > ul > li > a:nth-child(2) {}

      You can change the number 2 to 3 if you want to grab the third child and so on.

      Let us know if that helps. 🙂

      Reply
      • hot demo

        hi, i did not get that
        how it will works?

        i have a menu , there is a main category essentials or you can assume it main column
        under this main column
        there are sub 4 column
        name as
        column 1
        column 2
        column 3
        column 4

        under this numbering columns there are 4-5 product categories brother

        .et_pb_menu li.mega-menu > ul > li > a:first-child { }
        this code is working for number column row or first row

        what will the code for product categories which are below this numbering columns ?

        i add this code in the page css

        .et_pb_menu li.mega-menu ul {
        font-size: 1px;
        }
        .et_pb_menu li.mega-menu > ul > li > a:first-child {
        border-bottom: 1px solid rgb(0, 132, 142);
        font-size: 15px;

        }
        .et_pb_menu li.mega-menu > ul > li > a:last-child
        {
        font-size: 1px;
        border-bottom: 1px solid rgb(0, 132, 142);
        }
        .et_pb_menu li.mega-menu > ul > li > a:nth-child(2) {
        font-size: 1px;
        border-bottom: 1px solid rgb(0, 132, 142);
        }

        nothing is happening
        only first row which can be called as numbering columns is changing

        what i am doing wrong?

        thanks in advance
        thanks
        thanks

      • Hemant Gaba

        Could you please share the URL of the page for me to investigate further?

  22. Duncan

    How do I extend my mega menu to have 5 colums ?

    Reply
    • Hemant Gaba

      Could you please share the URL of the page for me to investigate this?

      Reply
  23. Eighmard

    Hi Sir, i tried this today and it didnt work. Can you help me thanks you so much.

    Reply
      • Eighmard

        Can i target different menu items (for example: Office Chair and Office Tables)
        so that i can put different ::after css for them. For now, whenever i click any mega menu link the bubble arrow show in just one place. Attached is a link to show an iamge about the different menu items. https://ibb.co/Qf0WD3T

      • Hemant Gaba

        Hi Eighmard,

        Could you please share the URL of the page for me to investigate further?

  24. Mark Denny

    Hi Nelson

    I have the mega menu working but non of the css work. I have followed your instructions to the letter but to no avail.

    Please advise

    Thank you

    Reply
    • Hemant Gaba

      Hi Mark,

      As I could see on the URL provided, you are using Ubermenu plugin for creating the Mega Menu and there is no mega menu class added as explained in the guide separately and that is why CSS is not working. If the URL in question is different from what you provided, please share that and I will investigate further. 🙂

      Reply
  25. Sander

    Hi!

    Thanks for this amazing tutorial! For the first row I’m using a background color… This color is the same as my menu text, so for the first row I want to change the text/link color…

    I’m using the following CSS

    /*edit the Divi mega menu submenu first row*/
    .et_pb_menu li.mega-menu > ul > li > a:first-child {
    background-color: #fc009b;
    color: #ffffff;}

    /*edit the Divi mega menu submenu first row on hover*/
    .et_pb_menu li.mega-menu > ul > li > a:first-child:hover {
    background-color: #4d4d4c
    }

    When I use this CSS, the background color is right, but the text color doesn’t to the right color.

    Hope you can help me. I will put the link of the website down below but the website is under construction… So I’ll also put a link to a screenshot in it…

    https://www.vandergootmediadesign.nl/wp-content/uploads/2021/08/Schermafbeelding-2021-08-25-om-23.26.34.png

    Regards,
    Sander

    Reply
    • Hemant Gaba

      Hi Sander,

      Could you please try placing the :first-child to the li tag and not to the anchor(a) tag and see if that helps?

      Please let me know how it goes. 🙂

      Reply
  26. sander

    Hello!

    I was wondering if there was something possible to change the second row of the submenu. Is there any CSS to do that?

    Reply
      • sander

        Is there a CSS code to only change the second row of the Mega Menu?

      • Hemant Gaba

        Hey Sander,

        Could you please share the URL of the website for me to investigate further on the query?

  27. Crawford

    Another great tutorial, thanks! 2 questions.

    1. How do I make the dropdown go full width of the screen instead of just the content width?
    2. Like a few other have asked I need 5 columns instead of 4. Any thoughts on this?

    Thanks!

    Reply
    • Hemant Gaba

      Hi Crawford,

      For the first question, we will see what can be done where and we will shortly come up with a better solution.
      For the second question, could you please try the snippet given below and see if that helps?

      .et-menu-nav li.mega-menu > ul > li {
      width: 20%;

      Let me know how it goes.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart