Styling the Main Header Sub-Menu Items (Separately)

Written by Dan Mossop

By default the Divi Theme header's sub-menus use the same styles as the main menu links. If you'd like to adjust the look of the sub-menu items separately, here's how to do it:

Setting the Sub-Menu Item Font Size

If you'd like to adjust the font size in of the sub-menu links, you can easily do so with a bit of CSS like so:

#top-menu .sub-menu .menu-item a { 
    font-size: 13px; 
}

Related Post: Adding CSS to the Divi Theme

The default size is 14px, so usually anything larger than that will increase the text size, and anything less than that will decrease it.

Making the Sub-Menu Items Bold

If you'd like to make the sub-menu items bold while leaving the main menu links alone (i.e. non-bold), you can do so with this CSS:

#top-menu .sub-menu .menu-item a {
    font-weight: bold;
}

We may earn a commission when you visit links on our website.

Enhance Your Divi Designs with Advanced Customization

Explore the full potential of your Divi site with advanced styling options. Whether adjusting sub-menu fonts or adding dynamic features, you'll benefit from streamlined control over design elements. Perfect for developers and designers aiming to push the boundaries of their Divi creations.

Get Divi Booster

Latest Posts

Customize Lightbox Title Styling in the Divi Gallery Module

Adjust the appearance of the lightbox title that appears when visitors open images from a Divi Gallery to align with your brand and improve readability. Refining the title’s color, size, and weight enhances visual hierarchy, accessibility, and overall polish. In this...

Center the Lightbox Image Count in the Divi Gallery Module

Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...

Style the Divi Gallery Module Lightbox Image Count

Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...

Customize the Lightbox Image Background Color in the Divi Gallery

Control the color that appears behind your images when users open in the gallery lightbox, including support for semi-transparent hues. This helps improve contrast for transparent images, align the experience with your brand palette, and create a more polished viewing...

Style the Divi Gallery Lightbox Close Button

Give your gallery lightbox a clear, on-brand close button by customizing its color and size. This improves visibility and usability against varying image backgrounds and ensures the button renders at full opacity for a consistent experience. In this guide we show you...

9 Comments

Doug Wilson on July 20, 2022 at 9:07 pm

So helpful! Works perfectly. Thank you!
Reply
- dan on July 20, 2022 at 11:15 pm
  
  You're very welcome, Doug!
  Reply
Jamie on December 7, 2020 at 10:30 am

Or if using the Theme Builder:
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a {
font-weight: 500;
}
Reply
- dan on December 7, 2020 at 6:59 pm
  
  Thanks for sharing, Jamie. Much appreciated!
  Reply
makin on October 12, 2019 at 10:41 am

Thanks for the useful information.
Could you please tell How to make just bold the items in submenu?
Reply
- dan on October 14, 2019 at 4:28 am
  
  Hi makin, I've just updated the post with a section on making the submenu items bold. I hope it helps!
  Reply
Litbea on July 19, 2019 at 9:00 am

Working great! Thanks!!
Reply
Kalpana on April 9, 2019 at 5:35 pm

thank you.. its perfectly working
Reply
Helene on October 16, 2017 at 12:43 pm

Useful! Thank you! Been looking for this!
Reply

Divi Booster