Creating Full Width Dropdown Menus with Icons in Divi

by | Aug 15, 2016 | Divi Tutorials | 110 comments

 

Have you ever noticed that the dropdown menus on almost every Divi website look the same? In today’s tutorial, I’m going to show you how to create some really sexy looking full width dropdown menus in Divi with some icons sprinkled in as well.

 

As with our last post on animated image hover effects with captions, this tutorial was highly requested after I used these full width dropdown menus in a site I built that was featured on the Elegant Themes blog last month as part of the Divi 100 series.

 

Here’s what we’ll be creating in this tutorial: View Demo

 

Let’s Get Started.

 

Step One – Setting Up the Menus in WordPress

The first thing we need to do is set up the menus in WordPress. Navigate to the Menus section in your WP Admin, and make sure your menu that is assigned to your “Primary Menu” is the one selected for editing.

 

wordpress-menu-locations

 

 

Next, drag your menus in place, and set up the sub-menu hierarchy to turn on the dropdown menus in Divi.

 

wordpress-menu-structure

 

Now we need to activate the mega-menu class in Divi. In case you’re unaware, Divi has a built in feature for creating mega menus. In other words, you can easily turn an over-crowded submenu into a mega menu to tidy things up a bit when you have submenus inside of submenus. It will automatically create columns within the menu for you. For our purpose in this tutorial, it just helps put the menus in the horizontal fashion, instead of the typical vertical dropdown menu. So, in order to add the mega-menu class, you need to click on “screen options” in the upper right hand corner. Then, tick the box for “CSS Classes” if it’s not already turned on.

 

menu-screen-options

 

 

Step Two – Adding the Image Icons

Now that are menus are organized how we want them, we need to add the icons to make our full width dropdown menus look extra sexy. Now, I imagine you’ve already looked at the demo for this post, so you’ve probably noticed those gorgeous icons that are in the dropdown menu. To download the three icons seen in the demo click here.

 

Want the entire set of 200 Business icons to use in your own project? Subscribe to get the entire set sent to you!

Click Here

 

After you’ve downloaded the icons and decided which ones to use (or chosen your own icons/images), now we need to upload them to the site. Navigate to the Media Library and drag and drop the icons that you plan on using.

Next, select one image, and copy the URL for the image.

wordpress-media-library-url-path

Here’s the HTML that will go inside your Menu label:

<img src="/wp-content/uploads/2016/08/1-26.png">Our Philosophy

You will need to replace what is in between the quotations with the URL from your media library.

Here’s what your menu label should look like:

wordpress-menu-label

Now, repeat the last part of this step for you’re remaining menu items of your submenu.

Step Three – Adding the CSS

The last step to customize our Divi menus into sexy full width dropdown menus with icons, is to add the CSS. I’m going to break up this CSS into a few parts, so that you know what does what. But if you want to copy all the CSS at once, you can copy and paste everything from the last CSS box below.

 

The first set of CSS is what makes the dropdown menus full width. So copy and paste the below CSS into your custom CSS box within the Divi Theme Options panel, or paste it directly into your child theme’s style.css file.

Makes the Dropdown Menus Fullwidth

/*Makes Dropdown Menus Full Width */

#top-menu .menu-item-has-children > a:first-child:after, .fullwidth-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
	display: none !important;
	color: red;
}

#top-menu .menu-item-has-children > a:first-child, .fullwidth-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {
    padding-right: 0;
}

.et_fullwidth_nav #top-menu li.mega-menu > ul {
    width: auto;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    display: inline-block !important;
    float: none !important;
    padding-top: 10px;
    padding-bottom: 5px;
} 

#top-menu li.mega-menu.mega-menu-parent-3 > ul > li, .fullwidth-menu-nav li.mega-menu.mega-menu-parent-3 > ul > li {
    width: auto;
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
}

#top-menu li.mega-menu > ul > li, .fullwidth-menu-nav li.mega-menu > ul > li {
    width: auto;
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
}

#top-menu li.mega-menu > ul > li > a:first-child, .fullwidth-menu-nav li.mega-menu > ul > li > a:first-child {
    border-bottom: none;
}

#top-menu li.mega-menu > ul > li > a, .fullwidth-menu-nav li.mega-menu > ul > li > a {
    border-bottom: none;
    width: auto !important;

}

Now if you look at the front end, the dropdown menus are full width, however everything still looks pretty bad. So we have more CSS to add.

 

Note: in order for your dropdown menus to be full width, you must first make your header full width. To do this, navigate to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar, and tick the box for “Make Full Width.”

 

So this next set of CSS is what fixes the giant icons. Paste this CSS in the same place, after the CSS above.

Resize and Reposition Menu Icons

/* Positions Icons Correctly  */
.menu-item img {
    max-height: 40px;
    margin-right: 10px;
    vertical-align: middle;
}

So now the dropdown menus are full width, and the menu icons are in place and positioned and sized appropriately. But, the menus still look very “Divi” thanks to the top border. This next set of CSS will remove that top border and add a bit of a shadow which will add some texture and make the menu more unique.

Remove Top Line Border and Adds Background Shadow

/* Removes top line border and adds shadow effect */
.nav li ul {
    border-top: none;
    box-shadow: 0px 10px 20px 2px rgba(30, 30, 30, 0.08) inset;
}

Okay so now the dropdown menu is looking great. But there’s a user experience issue we need to address. If you notice the menu in it’s current state is a little bit difficult to mouse over to the menu items in the dropdown menu, especially the left side. Basically, the dropdown menu will shut off by default once the mouse goes outside of the targeted area. This can be a huge problem that can frustrate visitors. So to fix it, we’re going to add some CSS that will add a delay before the menu disappears. I have the delay set to one second, however you can obviously tweak this as you see fit. I would recommend not going much longer than 1 second though if you have multiple drop down menus. The reason is if the user hovers to the first dropdown menu, then to the second, then back to the first, they will have to wait for the second dropdown menu to disappear before being able to see the first one again. I apologize if that sounds confusing, but just take my word for it, or test it out yourself :)

Adds Transition delay for User Experience

/* Dropdown Menu Delay Animation */

.et_fullwidth_nav #top-menu li.mega-menu > ul {
    transition-delay: 1s;
}

And lastly, here’s the complete set of CSS code for easy copying. You do not need to copy and paste this code if you already added the code above in each step. This is just for convenience :)

Complete CSS

/*Makes Dropdown Menus Full Width */

#top-menu .menu-item-has-children > a:first-child:after, .fullwidth-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
	display: none !important;
	color: red;
}

#top-menu .menu-item-has-children > a:first-child, .fullwidth-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {
    padding-right: 0;
}

.et_fullwidth_nav #top-menu li.mega-menu > ul {
    width: auto;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    display: inline-block !important;
    float: none !important;
    padding-top: 10px;
    padding-bottom: 5px;
} 

#top-menu li.mega-menu.mega-menu-parent-3 > ul > li, .fullwidth-menu-nav li.mega-menu.mega-menu-parent-3 > ul > li {
    width: auto;
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
}

#top-menu li.mega-menu > ul > li, .fullwidth-menu-nav li.mega-menu > ul > li {
    width: auto;
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
}

#top-menu li.mega-menu > ul > li > a:first-child, .fullwidth-menu-nav li.mega-menu > ul > li > a:first-child {
    border-bottom: none;
}

#top-menu li.mega-menu > ul > li > a, .fullwidth-menu-nav li.mega-menu > ul > li > a {
    border-bottom: none;
    width: auto !important;

}

/* Positions Icons Correctly  */
.menu-item img {
    max-height: 40px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Removes top line border and adds shadow effect */
.nav li ul {
    border-top: none;
    box-shadow: 0px 10px 20px 2px rgba(30, 30, 30, 0.08) inset;
}

/* Dropdown Menu Delay Animation */

.et_fullwidth_nav #top-menu li.mega-menu > ul {
    transition-delay: 1s;
}

That’s it, we’re done! If you have any questions, please let me know in the comments below! If you enjoyed this tutorial, feel free to share it in the Divi Facebook Groups or other social media ;) And don’t forget to subscribe to be notified about upcoming tutorials (50+ in the queue) as well as subscriber only discounts and freebies!

110 Comments

  1. Avatar

    Using the above code:

    Our People

    My icons were not visible I had to modify it to:

    Our People

    Using the Royal Commerce child theme.

    Thanks for the Great tutorial..

    Reply
    • Avatar

      Is it possible to have som Pictueres in the Menue? Sorry for my bad english

      Reply
      • Avatar

        Hi Ulamae, yes you can definitely use pictures instead of icons! The CSS included in this tutorial should size the pictures appropriately, but you may need to tweak it a bit.

        Reply
        • Avatar

          Hi Tim,
          we were following the tutorial for the full with drop down menu option. But we are not able to see the icons which uploaded in the screen. Can you please guide us on this.

          Reply
          • Avatar

            Hi Hema,

            Make sure you’re copying the URL path from the media library for each icon, and pasting it into the menu as shown in the tutorial. You can’t simply use the URL path that I use in the tutorial because it will be different for each site. Hope that helps! 🙂

        • Avatar

          Hello Tim

          We were following your full width drop down menu with icons tutorial, however in the front end the icons are not coming. Can you assist us on this query.

          Thanks in Advance.

          Guru

          Reply
    • Avatar

      Thanks for the heads up Paul. I think I need to put the HTML that adds the icon to the menu inside of the code box. I think when it get’s copied directly from the page (without a code box) it copies some unnecessary formatting. I’m glad you liked the tutorial though! 🙂

      Reply
  2. Avatar

    Does not work on my website at all, it never changes the mega-menu to full width.

    Reply
    • Avatar

      Hi Brenden, I’m so sorry to hear that. Did you make your header full width in the customizer? It’s necessary to do that in order for the dropdown menus to be full width. If not, please see the directions on how to do this after the first set of CSS in step three.

      Reply
      • Avatar

        Hi there, I did forget that part however it seems when doing it the fade in time is also then slowed, how can this be fixed? Its there a way i can transition delay n normal dropdown menu thats not fullwidth btw?

        Reply
        • Avatar

          I’m not exactly sure what you mean. I’m not seeing the fade in being delayed. When I compare it to the mega menu on the Divi demo website, it seems to be the same.

          Reply
  3. Avatar

    Nice tutorial Tim, so long but cool. But how can we use it for Extra?

    Reply
    • Avatar

      Thank you! I’m glad you liked it. Unfortunately this doesn’t work for the Extra theme. Extra’s menu is quite a bit different, so I’m afraid this tutorial is strictly Divi only.

      Reply
  4. Avatar

    Excellent tutorial. I didn’t know about the built-in mega menu option!

    Reply
    • Avatar

      Thank you Flo! I’m glad you enjoyed the tutorial. 🙂 Yes, the built in mega menu option often gets forgotten. But it’s incredibly useful, and lets you create a mega menu without the need for an additional plugin.

      Reply
    • Avatar

      Hi Christopher, I believe this is being caused from copying and pasting the HTML directly into the WordPress menu title. Try clearing it out completely, and then manually type it in the HTML for the image. Let me know if that works!

      Reply
      • Avatar

        It didn’t work for me Tim. Any other ideas what it mat be?

        Reply
        • Avatar

          I’m adding this: (clean)
          “”

          but I’m getting this: (percentage encoding & adding additional protocol & hostname to front of URL)
          ”https://website.org.uk/%E2%80%9Dhttps://website.org.uk/wp-content/uploads/2016/08/image.png%E2%80%9D”

          Any ideas?I’m adding this: (clean)
          “”

          but I’m getting this: (percentage encoding & adding additional protocol & hostname to front of URL)
          ”https://website.org.uk/%E2%80%9Dhttps://website.org.uk/wp-content/uploads/2016/08/image.png%E2%80%9D”

          Any ideas?I’m adding this: (clean)
          “”

          but I’m getting this: (percentage encoding & adding additional protocol & hostname to front of URL)
          ”https://website.org.uk/%E2%80%9Dhttps://website.org.uk/wp-content/uploads/2016/08/image.png%E2%80%9D”

          Any ideas?

          Reply
          • Avatar

            Yeah for some reason pasting HTML into the menu area doesn’t seem to be working too well for some users. Try manually typing it in instead. That seems to have fixed it for a few different people. Let me know if that solves it! 🙂

  5. Avatar

    Is it possible to add video content within the mega menu instead of just images?

    Cheers
    Ben

    Reply
    • Avatar

      Hi Ben,

      I supposed you could add the HTML for a video instead of an image, however I have not tried. I would advise to be careful with videos though as it can significantly slow down your site, especially if you are loading several of them in the menu. Let me know though if you’re able to get it working!

      Reply
  6. Avatar

    Hi,

    is it possible to integrate videos instead of images in the mega menu?

    Cheers
    Ben

    Reply
  7. Avatar

    Hi Tim

    Is it possible to modify the layout of the mega-menu? I would like to have the icons appear above the drop-down menu option. Instead of how you’ve done it in the tutorial where the icons appear to the left of the menu item.

    Thanks

    Reply
    • Avatar

      Hey Tony, great question! I can see that looking really cool. The easiest way to do it would be to put a break tag (< br >) after the img HTML in the menu. That will force the menu text to it’s own line and position it below the image. Let me know if you have any questions on this 🙂

      Reply
      • Avatar

        Hi Tim

        Adding the break worked and it even centered both the image and the menu name. Now I’m just not sure which way I prefer it to be displayed. I have kinda got use to the horizontal view.

        Thanks for the feedback

        Reply
        • Avatar

          You’re welcome! I don’t think you can go wrong either way 🙂

          Reply
      • Avatar

        Thanks, this works great

        Reply
  8. Avatar

    Great tutorial, I’ve followed all of the steps but I’m having an issue with getting the submenu to go the full width.

    I have checked the Full Width option in the “Divi > Theme Customizer > Header & Navigation > Primary Menu Bar” and this does extend the width however it doesn’t extend it all the way to the left and right sides.

    Any suggestions?

    Reply
    • Avatar

      Hey Tony, if you have set for full width in the customizer, and you have all the CSS in place, then I’m not sure why it wouldn’t be full width. I’d be happy to take a look at it though if you don’t mind pasting the link. 🙂

      Reply
      • Avatar

        Hi Tim

        Everything seems to be working as required, thanks for getting back to me. Cheers

        Reply
        • Avatar

          No worries! I’m glad it’s working now 🙂

          Reply
  9. Avatar

    Hello Tim!

    I implemented this tutorial, but I want to keep visible the horizontal menu after that the user click in any option of the submenu. Can you help me with this funcionality, please?

    Best regards

    Adri.

    Reply
    • Avatar

      Hi Adri, if I’m understanding you correctly, you want to have the submenu opened on the page after the user clicks on a page from the submenu? I’m not sure of a way to do that. You could fake it though by using a menu module at the top of the page that shows the submenus. It would probably take some CSS though to make it look like it’s the dropdown menu that is open. Sorry I can’t be of more assistance.

      Reply
  10. Avatar

    Hey mate

    Thanks for this .. very neat and sleek! Well done. So i am doing this for a normal (non-mega-menu) menu (like Brenden’s reply) and it is adding the delay on the hover state – i.e. i takes 1s to first load the submenu instead of 1s to close it as you do. I have about 5px space between the nav bar and the submenu that appears on hover and as soon as my mouse enters (whether quick or slow) that 5px space, the menu disappears. Doh! Please assist?

    My CSS is (I changed it slightly so it matches the html elements):
    #et-top-navigation #top-menu li > ul {
    transition-delay: 1s;
    }

    Thank in advance.
    Yatish

    Reply
  11. Avatar

    Hi Tim – Not sure if my comment submitted or not. And i type quite a bit – Doh!

    Thanks for this – very neat and sleek. Well done.

    So i am experiencing this strangely – On hover on the top level menu item, i have to wait a second for the submenu to appear first. Also i have a 5px space between the top menu and submenus, on hovering towards the submenu passing into that 5px space the submenu goes bye bye.

    Here is my CSS – i modified it a tad bit so the css selectors reference correctly as per the page html structure – note i don’t have it full width and not mega menu item :

    #et-top-navigation #top-menu li > ul:hover {
    transition-delay: 1s;
    }

    What am i doing whack?

    Please assist. Thanks in advance

    Cheers

    Reply
    • Avatar

      Hi Yatish,

      Can you provide a link? I’d be happy to take a look at it 🙂

      Reply
      • Avatar

        Hi there, thanks for the prompt reply. Unfortunately it is a private site where i cannot supply the link publicly currently – i could email it to you rather? Thanks Tim

        Reply
        • Avatar

          Yes, please feel free to send a link to support at divilife dot com

          Reply
  12. Avatar

    I’ve followed all the directions but the icons/links are overlapping one over the other?

    Reply
    • Avatar

      Hmmm, that’s strange. Do you mind sharing a link? I can give you the CSS to fix that.

      Reply
  13. Avatar

    Can you make any sub menu of this line up? So the nice icon top menu is like a header menu for any list below it. Not sure if I am explaining myself very well.

    Reply
    • Avatar

      Hi Nikki,

      Yes you could, but it would require some additional CSS, if I’m understanding you correctly.

      Reply
  14. Avatar

    For some reason, I cannot get the images to show up. They show the broken image link icon. I’ve followed the steps to a T, and have tried troubleshooting as well. Any advice?

    Reply
  15. Avatar

    I too ended up having broken images where the icons are on my menu. I entered the URL manually and that did not help. Are there any other solutions?

    Reply
    • Avatar

      Hi Troy,

      Broken images are a result of the browser not being able to find the image at the URL mentioned. So I would triple check the URL paths to be sure. Keep in mind, there’s a few different images (the image lines for the title, the outline on hover, and then the background image itself). So make sure you’re placing the correct image URL in the correct place.

      Reply
  16. Avatar

    This looks really cool. But what is the point of enabling the CSS field from the Screen Options? Are we supposed to give each menu item a CSS class? If so, what class?

    Reply
    • Avatar

      You need to enable the CSS field in order to add the mega-menu class. It’s a built in class in Divi to automatically make the menu a “mega menu” which is the first step of making it full width.

      Reply
  17. Avatar

    Code is missing this:

    #top-menu li.mega-menu.mega-menu-parent-2 > ul > li, .fullwidth-menu-nav li.mega-menu.mega-menu-parent-2 > ul > li {
    width: auto;
    display: inline-block !important;
    text-align: center !important;
    float: none !important;
    }

    Reply
    • Avatar

      As the tutorial mentions, you need to add mega-menu to the CSS field of the menu. That makes it so you don’t need to add the code you mentioned.

      Reply
    • Avatar

      Thanks for this code. Fixed my issue ~ if there were only 2 sub menu items, they would go vertical. 😉
      Thank you!
      -michelle

      Reply
  18. Avatar

    Great tutorial. I have a question though. I am not using the icons but I have 12 sub items and when I use the mega-menu they are horizontal, but not aligned whatsoever and do not look right. What can i do to fix it?

    Reply
    • Avatar

      Hi Michael,

      Did you add the CSS from the tutorial? Because it should fix the alignment issue. Hope that helps! 🙂

      Reply
  19. Avatar

    Hi Tim. Good job. My website don´t show the icons, I don´t Not sure where I went wrong or why they would be broken the images.
    Thanks a lot for this tutorial

    Reply
    • Avatar

      Hi Robert,

      I would triple check the URL paths and make sure they’re correct. Go to your media library and copy the URL for each icon and paste it into the menu as shown in the tutorial. My URL path will be different than yours, so you have to grab it from your media library. Hope that helps! 🙂

      Reply
  20. Avatar

    I have the same problem like Jason Sensi, im putting same code but images not showing only cracked picture.

    Reply
    • Avatar

      Hi Tommy,

      You will need to make sure the URL paths were inputted correctly. Make sure you are copying and pasting the URL paths straight from your own media library, and not the uRL example in the tutorial. Hope that helps 🙂

      Reply
  21. Avatar

    Great tutorial Tim!

    I too have the fullwidth header checked, but my menu doesn’t go all the way.

    The other question is, in your tutorial you have us put a # as the url for the sub menu pages. But, when I do that, and click on the page name, nothing happens. So, I went back and added them as pages so they will actually open to the page. I left Fishing Report like you have it so you can see what I’m talking about. Did I miss something? I added the site I’m building.

    Reply
    • Avatar

      Hi Cat,

      Did you add the CSS from the tutorial as well as add the class mega-menu to the menu? As for the # in the menu link, that’s just a placeholder. Putting a # within a link makes the link point to the page it’s on. So I used that as a placeholder for the sake of the tutorial. But replace that with your own pages 🙂

      Reply
      • Avatar

        Hi Tim,
        HELP. I got the menu working great for one heading Fly-fishing (with 3 subpages). Now the second menu item About REO (with 2 subpages simply will not go horizontal. The Blog page keeps appearing on the page like it is a sub-menu of Our Company…but on the Menu backend, it is not. I followed the steps as in Fly-Fishing but just can’t get it working. Any ideas? Sorry to bug you, this really is a cool technique.

        thank you for any help.

        Reply
        • Avatar

          so, now when I added a 3rd subpage in between Our Company and Blog, it appears horizontal and normal.

          When i remove the middle page, it goes back to Blog trying to be a sub to Our Company. weird, right?

          Reply
          • Avatar

            Hmm that’s very odd. You added the mega-menu class?

        • Avatar

          Hmm that sounds like a glitch. I’d try dragging it into the sub-menu place in the backend, clicking save. And then changing it back and hitting save again. Sometime things in WordPress can get kinda “stuck” when it comes to saving settings to the database.

          Reply
  22. Avatar

    Hi,
    Thank you for this tutorial. I have sub-menus under the drop down menus. Can I make these sub menus appear on hover only?

    Reply
    • Avatar

      Hi Dubai,

      Do you mean you want the sub menus of the drop down menu to automatically show when the drop down menu shows? That would require quite a bit of tweaking, so unfortunately it’s not something I know how to do presently.

      Reply
  23. Avatar

    Hi Tim,

    Thanks for the great tutorial!

    After following it step by step (…and triple-checking everything) I’m still not able to have the icons/images loaded properly.

    In the tutorial you say we should copy the whole URL of the icon we want to use and paste it in front of our menu label. Then the mane label should look like should look like this:
    “” Xxxxxx”.

    Please explain me what happened to the “https://www.xxxx.com” in the beginning and to the “.png” />Xxxxx” in the end of the code?

    The beginning somehow dropped away and the end changed to “.png>Xxxxx”
    How come? …And where did the “#” for URL come from? (which I can’t find anywhere). ;(

    You should be able to see my results on the attached URL/Services/Support.

    I have the latest version of both WP and Divi.

    Could there be a minor typing error in the code you gave us? So sorry to trouble you with this. I just loved your tutorial and would like to take full advantage of it.

    Thanks again!
    Kimmo

    Reply
    • Avatar

      I just checked your link and it looks like you removed the code. I’m sorry it took me so long to check it. I’d be happy to take a look if you add it back again. Just let me know 🙂

      Reply
  24. Avatar

    Great tutorial. But the transition effect doesn’t work with sub-sub-menus. The menu starts to flicker and behave very weird. I tried to figure this out and looked up the Divi forum. It seems to be a big issue that cannot be figured out without JS. But even the solution they offered, inlcluding JS manipulation, didn’t do the trick. Maybe you have a solution?

    Reply
  25. Avatar

    How would you change the font style on the menu items like you did for the website you did? would you do .nav li ul{ font-family: verdana; font-size: 50%;} ?

    Reply
    • Avatar

      IF you’re using a built in font that comes with Divi then I recommend changing it via the Divi Theme Customizer. If you’re using a 3rd party font then I recommend the plugin called “Use Any Font.” It’s very easy to upload font files and assign the classes.

      Reply
  26. Avatar

    Thank you for the video! I seem to not be able to find the line of code that removes the drop down arrows. I would like to have them there.

    Reply
    • Avatar

      It’s the first chunk of CSS in the first box of code. So remove this:

      #top-menu .menu-item-has-children > a:first-child:after, .fullwidth-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
      display: none !important;
      color: red;
      }

      Reply
  27. Avatar

    Hi Tim! I have learned allot from your tutorials, and I thank you for that!

    Question: I would only like to use a part of your code, to slow the menu from disappearing ( /* Dropdown Menu Delay Animation */

    .et_fullwidth_nav #top-menu li.mega-menu > ul {
    transition-delay: 1s;
    })

    But it does not seem to work. Is there another code I can use?

    Reply
    • Avatar

      You’re welcome! Give this a try instead:

      .et_fullwidth_nav #top-menu li > ul {
      transition-delay: 1s !important;
      }

      Reply
      • Avatar

        great thanks!!

        Reply
  28. Avatar

    Great, I tried to do something similar but vertically primal menu – and failed. If you ever have time, it would be awesome to watch tutorial how do this.

    Reply
  29. Avatar

    Great. I will add this to my list of things to try out. Thank you.

    Reply
  30. Avatar

    Hey, Tim. Thanks for this. I’ve always wanted to customize the drop-down menu so it’s not so Divi-like. This helps. 🙂

    I have one issue I could use a hand with if you’ve got time. Everything is working great for all my menu items except one. I have one item where the submenu items are still stacked on top of each other vertically instead of spread out horizontally. All the other ones work fine. I have the mega-menu class in the right place and all the CSS in place. Not sure why this one menu item isn’t cooperating. Any thoughts?

    Reply
    • Avatar

      Hey William, glad it worked out (mostly) for you. I’m not sure why one would randomly not work. Any chance you have some other CSS that is targeting just that one dropdown that could be conflicting?

      Reply
  31. Avatar

    Hi Tim, Thanks so much for this tutorial. It was exactly what I needed, and very helpful. For some reason, no matter what I do I can’t get the drop down menu to have delayed animation. Is there anything else that I could try aside from the original code provided?
    Thank you!
    Madison

    Reply
    • Avatar

      You’re welcome! Is there any chance you have other custom CSS that may be overriding?

      Reply
  32. Avatar

    Hi Tim,

    I figured out how to modify the above css to my needs. Thank you.

    Reply
  33. Avatar

    What would cause the submenu to display horizontally, each menu item is side-by-side instead of vertically?

    Reply
    • Avatar

      Hey Joe, the point of the tutorial is to make the dropdown menu full width and horizontal. Are you saying you want them to be full width but vertical?

      Reply
  34. Avatar

    Great tutorial it looks pretty good but my icons are not side-by-side

    Reply
    • Avatar

      Hi Sharon,

      I believe this is happening because your header/menu is set to the centered style in the customizer instead of default. The below CSS should fix things though 🙂

      ul.sub-menu li {
      width: auto !important;
      }

      Reply
  35. Avatar

    This worked so perfectly! Thank you! Is there any way I can add more spacing between the list items? It just looks a bit crammed on my site. Thank you thank you!

    Reply
    • Avatar

      Great! Glad it worked for you! You can add more space by adding this custom CSS:

      .sub-menu li {
      margin-right: 50px !important;
      }

      And of course adjust the number of pixels to fine tune the space 🙂

      Reply
  36. Avatar

    Thanks for the tutorial. I’m trying to make two mega menu items. However, it seems to lump everything under whichever is the top option. Is it possible to do this?

    Reply
    • Avatar

      I took a look at your link, and it appears to be working correctly. I’m assuming you figured it out?

      Reply
  37. Avatar

    Wow a lot of comments!
    Thank you- great tutorial, there was a lot for me to use to get what I wanted out of my drop down menu and then some!

    Reply
  38. Avatar

    Hi Tim, me again.
    I just realized that if I’ve got only 2 submenus, they are displayed vertically and switch to horizontal when more than 3!
    How can we solve that?
    Cheers.

    Reply
    • Avatar

      hmmm I didn’t realize the CSS would be different for only two. I would recommend inspecting the menu with only two and compare it with our demo to see if the classes change. Then, update the class in the CSS from the tutorial with the class for only two submenus.

      Reply
  39. Avatar

    Awesome Work Tim

    Reply
  40. Avatar

    Thank you so much for the great tutorial! Everything is working as it should except for the pesky line at the top did not disappear. Can you help with a solution please?

    Thanks

    Reply
  41. Avatar

    Any idea as to why my menu columns are now not aligning properly? For example, the submenu items are not aligning under the Main Menu category. They are offsetting to the right. Is this because of the Divi update? I used this code before without issue. Looks like this….

    Image /Service
    Sub service 1
    Sub Service 2
    Sub Service 3

    Reply
    • Avatar

      Sorry, they didn’t align when posted. But the sub service items seem to be aligning in another column.

      Reply
  42. Avatar

    Is there a way to delay when the sub-menu appears on mouseover? My mega menu dropdowns instantly even with the transition delay css. I’m trying to impact user intent. I want someone to be able to move the mouse past the menu and the dropdown not pop out and get in their way. I want the dropdown to only appear when the pause the mouse on the menu item. Thanks.

    Reply
    • Avatar

      Hi Eric,

      Yes you should in theory be able to do that by adding a transition delay to the hover dropdown overall. I have not tried this, so you may need to play with it to test out where it needs to go specifically in the CSS.

      Reply
  43. Avatar

    Every thing works perfect except when I add the

    /* Dropdown Menu Delay Animation */

    .et_fullwidth_nav #top-menu li.mega-menu > ul {
    transition-delay: 1s;
    }

    For some reason my Custom CSS will not allow this section to be saved? I even tried changing the #top-menu to the name of mine which is Main-Navigation

    Thank you for all your help and doing the tutorial.

    Reply
    • Avatar

      Hi William,

      Try adding !important tag to it: transition-delay: 1s !important;

      Reply
  44. Avatar

    Hello! I’m using WordPress with Divi theme. I’m trying to figure out how to expand dropdown menu. The text goes on two rows and dropdown menu doesn’t fit the page.
    Any advices?

    Reply
    • Avatar

      You can customize the width with this CSS:

      .nav li ul {
      width: 500px !important;
      }

      Change 500px to your desired width 🙂

      Reply
  45. Avatar

    This work EXCEPT not with a custom Global header any ideas to fix this?

    Reply
    • Avatar

      You may need to tweak the classes a bit to accommodate the custom header, but the CSS should work the same if you change the classes

      Reply

Submit a Comment

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

[et_bloom_inline optin_id="optin_1"]<br />