Creating Full Width Dropdown Menus with Icons in Divi

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

 

Note: If you want an easy solution for creating incredible dropdown menus (and mega menus!) without needing to mess with code, then check out Divi Mega Pro!

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
    Paul on August 16, 2016 at 1:37 am

    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
      Ulamae on August 16, 2016 at 11:19 am

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

      Reply
      • Avatar
        Tim Strifler on August 16, 2016 at 2:00 pm

        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
          Hema on December 1, 2016 at 5:01 am

          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
            Tim Strifler on December 2, 2016 at 9:37 am

            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
          Guru on December 1, 2016 at 5:16 am

          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
      Tim Strifler on August 16, 2016 at 1:59 pm

      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
    Brenden on August 16, 2016 at 6:27 am

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

    Reply
    • Avatar
      Tim Strifler on August 16, 2016 at 2:04 pm

      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
        Brenden on August 16, 2016 at 11:03 pm

        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
          Tim Strifler on August 17, 2016 at 5:36 pm

          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
    bb on August 16, 2016 at 4:54 am

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

    Reply
    • Avatar
      Tim Strifler on August 16, 2016 at 2:02 pm

      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
    Flo Nelson on August 16, 2016 at 4:26 pm

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

    Reply
    • Avatar
      Tim Strifler on August 16, 2016 at 6:11 pm

      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
      Tim Strifler on August 17, 2016 at 9:57 pm

      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
        BritishSoldier on August 19, 2016 at 11:43 am

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

        Reply
        • Avatar
          BritishSoldier on August 19, 2016 at 12:16 pm

          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
            Tim Strifler on August 19, 2016 at 3:43 pm

            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! 🙂

  6. Avatar
    Ben on October 17, 2016 at 9:33 am

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

    Cheers
    Ben

    Reply
    • Avatar
      Tim Strifler on October 17, 2016 at 2:01 pm

      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
  7. Avatar
    Ben on October 17, 2016 at 11:19 am

    Hi,

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

    Cheers
    Ben

    Reply
  8. Avatar
    Tony on October 17, 2016 at 10:38 pm

    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
      Tim Strifler on October 18, 2016 at 1:35 pm

      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
        Tony on October 25, 2016 at 5:36 am

        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
          Tim Strifler on October 25, 2016 at 4:01 pm

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

          Reply
      • Avatar
        Henk on February 7, 2019 at 2:24 pm

        Thanks, this works great

        Reply
  9. Avatar
    Tony on October 18, 2016 at 1:39 am

    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
      Tim Strifler on October 18, 2016 at 1:31 pm

      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
        Tony on October 25, 2016 at 5:28 am

        Hi Tim

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

        Reply
        • Avatar
          Tim Strifler on October 25, 2016 at 3:59 pm

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

          Reply
  10. Avatar
    Adri Salazar on October 18, 2016 at 2:19 am

    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
      Tim Strifler on October 18, 2016 at 1:29 pm

      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
  11. Avatar
    Yatish on October 19, 2016 at 10:29 am

    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
  12. Avatar
    Yatish on October 19, 2016 at 11:34 am

    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
      Tim Strifler on October 19, 2016 at 4:18 pm

      Hi Yatish,

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

      Reply
      • Avatar
        Yatish on October 20, 2016 at 9:42 am

        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
          Tim Strifler on October 21, 2016 at 3:48 pm

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

          Reply
  13. Avatar
    Chris on November 13, 2016 at 9:57 pm

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

    Reply
    • Avatar
      Tim Strifler on November 15, 2016 at 3:35 pm

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

      Reply
  14. Avatar
    Nikki on November 18, 2016 at 12:07 am

    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
      Tim Strifler on November 18, 2016 at 10:14 pm

      Hi Nikki,

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

      Reply
  15. Avatar
    Jason Sensi on November 20, 2016 at 3:44 pm

    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
  16. Avatar
    Troy on November 24, 2016 at 12:42 am

    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
      Tim Strifler on December 2, 2016 at 8:36 am

      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
  17. Avatar
    Aaron on November 28, 2016 at 11:15 pm

    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
      Tim Strifler on December 2, 2016 at 9:13 am

      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
  18. Avatar
    Aaron DeVandry on November 28, 2016 at 11:34 pm

    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
      Tim Strifler on December 2, 2016 at 9:14 am

      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
      michelle on July 18, 2019 at 4:59 pm

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

      Reply
  19. Avatar
    Michael on November 29, 2016 at 5:02 am

    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
      Tim Strifler on December 2, 2016 at 9:15 am

      Hi Michael,

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

      Reply
  20. Avatar
    Robert on November 30, 2016 at 6:35 pm

    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
      Tim Strifler on December 2, 2016 at 9:29 am

      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
  21. Avatar
    Tommy on December 2, 2016 at 6:15 am

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

    Reply
    • Avatar
      Tim Strifler on December 2, 2016 at 9:51 am

      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
  22. Avatar
    Cat on December 3, 2016 at 4:38 pm

    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
      Tim Strifler on December 7, 2016 at 11:44 am

      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
        Cat on December 8, 2016 at 10:29 am

        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
          Cathy Busick on December 8, 2016 at 10:44 am

          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
            Tim Strifler on January 13, 2017 at 5:38 pm

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

        • Avatar
          Tim Strifler on January 13, 2017 at 5:40 pm

          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
  23. Avatar
    Dubai on December 5, 2016 at 2:31 pm

    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
      Tim Strifler on December 7, 2016 at 11:32 am

      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
  24. Avatar
    Kimmo on December 8, 2016 at 10:33 am

    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
      Tim Strifler on January 13, 2017 at 5:43 pm

      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
  25. Avatar
    Florian on December 8, 2016 at 3:47 pm

    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
  26. Avatar
    Malcolm on December 11, 2016 at 11:59 pm

    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
      Tim Strifler on January 13, 2017 at 5:37 pm

      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
  27. Avatar
    Danny on December 19, 2016 at 12:05 pm

    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
      Tim Strifler on January 12, 2017 at 2:20 pm

      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
  28. Avatar
    Claudia Bakker on January 8, 2017 at 9:36 am

    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
      Tim Strifler on January 12, 2017 at 2:02 pm

      You’re welcome! Give this a try instead:

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

      Reply
      • Avatar
        Claudia on February 11, 2017 at 8:30 am

        great thanks!!

        Reply
  29. Avatar
    Maciek on January 11, 2017 at 7:55 am

    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
  30. Avatar
    Tricia on July 27, 2018 at 3:30 am

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

    Reply
  31. Avatar
    william1 on August 14, 2018 at 8:33 am

    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
      Tim Strifler on August 21, 2018 at 12:23 pm

      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
  32. Avatar
    Madison on August 21, 2018 at 2:22 pm

    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
      Tim Strifler on August 27, 2018 at 7:38 am

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

      Reply
  33. Avatar
    Susila on August 23, 2018 at 2:24 am

    Hi Tim,

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

    Reply
  34. Avatar
    Joe on September 12, 2018 at 5:26 pm

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

    Reply
    • Avatar
      Tim Strifler on September 13, 2018 at 7:58 pm

      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
  35. Avatar
    Sharon on October 17, 2018 at 4:41 am

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

    Reply
    • Avatar
      Tim Strifler on October 17, 2018 at 6:48 am

      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
  36. Avatar
    Cosette on October 26, 2018 at 5:02 pm

    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
      Tim Strifler on October 27, 2018 at 8:29 am

      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
  37. Avatar
    DJ Horton on November 6, 2018 at 1:27 pm

    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
      Tim Strifler on November 14, 2018 at 8:45 am

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

      Reply
  38. Avatar
    Stacy on November 13, 2018 at 12:44 pm

    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
  39. Avatar
    cedric on March 5, 2019 at 6:42 am

    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
      Tim Strifler on March 6, 2019 at 2:29 pm

      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
  40. Avatar
    Samar Jamil on May 12, 2019 at 6:52 am

    Awesome Work Tim

    Reply
  41. Avatar
    Ana Daniel on May 27, 2019 at 11:49 am

    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
  42. Avatar
    Josh on June 6, 2019 at 11:14 am

    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
      josh on June 6, 2019 at 11:16 am

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

      Reply
  43. Avatar
    Eric Dingler on July 24, 2019 at 7:05 am

    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
      Tim Strifler on July 29, 2019 at 3:48 pm

      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
  44. Avatar
    William Slish on July 24, 2019 at 11:02 am

    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
      Tim Strifler on July 29, 2019 at 3:46 pm

      Hi William,

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

      Reply
  45. Avatar
    Krasimir Ivanov on January 14, 2021 at 2:14 am

    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
      Tim Strifler on February 10, 2021 at 12:00 pm

      You can customize the width with this CSS:

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

      Change 500px to your desired width 🙂

      Reply
  46. Avatar
    knight on March 19, 2022 at 10:11 am

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

    Reply
    • Avatar
      Tim Strifler on March 22, 2022 at 1:44 pm

      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"]