How to Customize the Dropdown Menu in Divi
In this tutorial, I show you “How to Customize the Dropdown Menu in Divi.” By default, Divi doesn’t provide us with many options to style the dropdown menu but with just a few lines of CSS, you can dramatically change the look of your sub-menu to separate your look from the average Divi design!
In this video, I show you how to adjust the sub-menu color, text alignment, hover over state and more. Enjoy, try it out and if you come up with some slick designs, be sure and let me know!
/*----------Sub Menu----------*/
#top-menu li li a {
border: 1px solid white;
margin-bottom: 15px;
text-align: center;
}
#top-menu li li a:hover {
color: #3e007f;
background: white;
opacity: 1!important;
}
.nav li ul {
border-top: 0px solid #3e007f;
margin-top: -20px;
}
/*----------Sub Menu Mobile----------*/
.et_mobile_menu {
border-top: 0px solid #2ea3f2;
}
.et_mobile_menu li a {
text-align: center;
}
(Elegant Themes) Divi Mobile Menu Collapse
Similar Tutorials:
https://divilife.com/creating-full-width-dropdown-menus-with-icons-in-divi/
https://www.surfnlearn.com/wordpress-tutorials/modifying-divi-drop-menu/
https://divibuilderaddons.com/dwkb/change-the-drop-down-menu-width/
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
I complimented you on your menu once and you said you’d do a tutorial eventually. Happy to see it. Thanks!
Man of my word, Jerry! ha thanks for the reminder and feedback!
Great tutorial, Josh! The dropdown menu is something that rarely get’s customized, but it’s a rather simple way to spice up any Divi site, as you demonstrated in this tutorial. I love the hover effects in both examples as well! And thanks for linking to my Divi Life post too 🙂
Thanks, Tim! Yeah I agree, the dropdown menu seems to always be overlooked on most Divi designs. But it really goes a long way in separating from the crowd. And no problem on the link!
hood work joosh skeep it up…. ???????????????
I like being able to do this without a plugin. Nice work! I have gotten a similar look on my site with the Mobile Menu Customizer plugin. http://www.realestate30aflorida.com
Very cool, Kurt. Yeah that looks like almost the exact same effect. I try to avoid using extra plugins at all cost so hopefully this trick helps you out! But nice to know about that plugin as well!
Appreciating the videos as I dive into Divi – thank you Josh Hall. You mentioned about knowing to how show a hover element without actually hovering… you can do that in Chrome by using the :hov and :hover elements. That way you can see your result without needing to mouse over.
Perfect, Jason! Exactly what I was looking for. Thanks so much. I knew there had to be a solution, just never found it. Next time I do a sub menu tutorial I’ll look more legit 🙂 Thanks again!
Nice tutorial – I’ve been customising the submenus as well.
In regards to having the hover item open without mouse hover in the inspector, you can just right-click the html selector and select ‘hover’. Or in the style window, you can use the :hov filter (top right) and check the ‘hover’ state. The css for the hover state will appear in the style window as well so you can add custom css to it.
Thanks, Aleksander!
Second time today I’ve found a tutorial on your website to do exactly what I needed. Well explained and easy to follow! Thanks! — Jamii
Ah I love hearing that!! Thanks for the comment, Jamii 🙂 So glad the tutorials have helped.
HI Josh, I’ve followed tons of your work and it’s always worked awesome to add different elements to my site! I’m having trouble with this one however, as the changes I make show up when inputted on the style sheet but when I publish and refresh they don’t appear. for example, I put the code in for a 1px border and text-align center, but after I Publish and refresh, it goes back to no border and left side. any ideas? thanks!!
Great to hear, Morgan! Usually you have to make sure your cache is cleared, browser is refreshed and if that doesn’t work, see if there’s something that’s overriding the stylesheet. Worst case you could put the code in the theme customizer CSS area and that should overwrite everything else!
Hi Josh, I’ve really enjoyed your tutorials and have had lots of success creating a more customized website with very little coding knowledge thanks to you, but i’m not having the same result this time. I’ve recently added a drop down menu and wanted to customize it to fit the theme of the page but it doesn’t seem to be working. When I change it in inspect element it makes the correct changes but when I copy it over to my style sheet, publish and refresh, it reverts back to its original state. any ideas on what could cause this? Thanks!!
Awesome to hear, Morgan! Thanks so much for the comment. I’m not sure how to go about that with CSS so (if you’re not too coding advanced) I’d recommend doing it with the mhmm header plugin. Hope that helps for now!
Hi Josh, Sorry I posted twice, must’ve forgotten I did the first one! It works now, I had to update the theme and after that it worked fine! Thanks for the reply, You’re really great at teaching in a way that makes sense for everyone! I’ve been able to implement some neat things on my own by using what you taught as a basis point, keep up the great work 🙂
Awesome! Thanks so much for the comment 🙂 Lot of cool things in the works!
Hi Josh!
learning from your tutorial i created 10+ website. my website is digipayfast.com. you are my inspiration. thank u so much
So awesome to hear, Keshav! I’m working on a whole suite of courses (CSS, WordPress and Divi related) so I think all of that will help you take your game up to a whole new level! Thanks for the comment.
Hello, Josh! thank you very much for your work!
I have a menu made with the fullwith menu module, I would like to apply the ccs code that you show to give it those effects, and I take this opportunity to ask you how to make it sticky even on mobile.
note: I would not like to remove the primary menu
You can use position: fixed; on any element you want to be sticky. You’ll just need to code the width, height, etc for that element accordingly.
Please Update Your Code
This all still works like a charm. It’s what I use on my site 🙂