[SUMMER SALE] Get 30% Off On All Our Divi Products And Membership👉
[Limited Time Offer] Get 40% off ALL ACCESS MEMBERSHIP before it’s gone!👉
mark Hendriksen logo

How to style and adjust the width of the dropdown menu in Divi with CSS

by Mark Hendriksen | Oct 9, 2018 | Divi tutorials | 23 comments

HomeDivi tutorialsHow to style and adjust the width of the dropdown menu in Divi with CSS

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and popular page builders.

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.

If you want to take your Divi header to the next level then try to make a custom divi header by following my custom header tutorial.

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.

/* ##### DROPDOWN MENU STYLES ##### */

#top-menu .sub-menu {
   background-color: #3c5464; /* Background color dropdown */
   border-top: 3px solid #25313a; /* Top border color dropdown */
}

#top-menu .sub-menu li a {
   font-size: 14px; /* Font size dropdown */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid #768792; /* Border bottom menu item color */
}

.sub-menu li:hover {
   background-color: #25313a; /* Hover color menu item */
}

.sub-menu .current_page_item {
   background-color: #25313a; /* Current menu item color dropdown */
}

#top-menu .sub-menu li {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;
}

#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;
}

#top-menu .sub-menu {
   padding-top: 0px;
   padding-bottom: 0px;
}

.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);
}

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

/* ##### DROPDOWN MENU WIDTH ##### */

.nav li ul {
   width: 280px !important; /* Width of the dropdown menu */
}

.nav li li ul {
   left: 280px !important; /* Use the same size as above */
}

#top-menu li li a {
   width: 240px; /* Make this 40 less then the width of the dropdown menu */
}

Note: If you want to change the width to something else then follow the notes between /*  */

I hope this tutorial was helpfull for you. By default there are not that many styling options for the dropdown menu, but with these little tweaks you can still style your dropdown menu.

The same issue is with the mobile menu. You can follow my tutorial how to style the Divi mobile menu for more customizations.

You Might Also Like…

23 Comments

  1. Jonathan Starr

    This is awesome! You should create a cheat sheet for the main menu level as well. That would be bomb!

    Reply
  2. RILDO LIMA

    Thank you for sharing your knowledge. very good!

    Reply
  3. iisiolu

    thumps. very helpful

    Reply
  4. Clare

    I’ve been searching for days how to resolve part of my menu disappearing beneath the fold. Bosch…..you’ve done it!!

    Reply
  5. Wan

    It worked 🙂 But i have another issue – it affected the mega menu that I have. Really appreciate if you can help me on this 🙂

    Reply
    • Mark

      Hi Wan,

      Could you give me an URL than I have a look.

      Reply
  6. Johannes

    It saved me hours right now, thank you very much!

    Reply
  7. Nick Sloan

    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.

    Reply
    • Mark

      What is the link of the website? Then I have a look.

      Reply
      • Nick Sloan

        Oh thanks Mark. it’s stokestgregory.org

        Reply
        • Nick Sloan

          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.

  8. jhon

    It’s great. Help me out from the menu problem…thanks

    Reply
  9. Melanie

    This worked well thank you! How do you keep the width the same for the mobile version though?

    Reply
    • Melanie

      Never mind I figured it out. 🙂 Thanks again!

      Reply
  10. karen

    Briliant thanks so much!

    Reply
  11. Nityia

    Thanks so much!!! Very helpful line of code!

    Reply
  12. Shiva Kumar

    Thanks a lot. It’s help’s a lot.

    Reply
  13. Lauren V. Brown

    I’ve never used code before and could figure this out. Great instructions. Many thanks!

    Reply
  14. Ilse

    Great code but it’s still breaking the menu item text in a weird way. Hopefully you can help me fix this

    Reply
    • Mark Hendriksen

      Hi Ilse,

      If you provide a link then I will have a look for you.

      Reply
  15. faisal

    how about to change drop down menu width according to content

    Reply
    • Mark Hendriksen

      Hi Faisal,

      That should be possible but I do not have some code ready for this. But I will make a tutorial about it.

      Reply

Submit a Comment

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