How to style and adjust the width of the dropdown menu in Divi with CSS
Do you want to style your dropdown menu in Divi a little different than the style options that are available? In this tutorial, I’ll show you how you can accomplish that with CSS.
At the end of this post I’ll also show you how you can increase the width of the dropdown menu.
You can see a live demo here.
CSS styles for your dropdown menu
First you need to create a dropdown menu. Then you can add this CSS for the styling. place the CSS code in Theme options > Custom CSS or in your child theme if you are using one.
Note: I have added some notes between /* */ so you know where you can change the colors and font size.
Increase the width of the dropdown menu
Sometimes the text of your dropdown menu breaks on another line, to avoid this we can increase the width of the dropdown menu. Add the following CSS code in Theme options > Custom CSS
Note: If you want to change the width to something else then follow the notes between /* */
Join today
Free Membership
Sign up for a Free membership and get access to this and all other free Divi layout packs, cheat sheets, exclusive discounts and much more.
13 Comments
Submit a Comment
Join today
Free Membership
Free Divi layout packs
Checklists & Cheat sheets
Exclusive discounts
This is awesome! You should create a cheat sheet for the main menu level as well. That would be bomb!
Thank you for sharing your knowledge. very good!
thumps. very helpful
Very nice design. Thank you
I’ve been searching for days how to resolve part of my menu disappearing beneath the fold. Bosch…..you’ve done it!!
It worked 🙂 But i have another issue – it affected the mega menu that I have. Really appreciate if you can help me on this 🙂
Hi Wan,
Could you give me an URL than I have a look.
It saved me hours right now, thank you very much!
Thanks for this very handy code. It altered the width of my dropdown menus when viewed on the home page, but not when viewing the same header/menus from other pages. Hoiw do I make it global? Many thanks.
What is the link of the website? Then I have a look.
Oh thanks Mark. it’s stokestgregory.org
Sorry, it may just have been a cacheing issue. It seems ok now —though I do have one other question: the different lines in your code appear to apply to different levels in the menu. On that site, which is “#top-menu” and which is “li ul”/”li li ul”?
Many thanks.
It’s great. Help me out from the menu problem…thanks