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

Top (or Bottom) Align Divi Icon List Module Icons

When Icon List items wrap onto multiple lines, the default icon alignment can make the icon appear vertically centered next to the text, which may look unbalanced or harder to scan. Setting the icons to align at the top creates a cleaner, more consistent...

Make Divi Button Modules Full Width with Centered Content

This configuration makes a Divi button stretch to the full width of its container while keeping its label neatly centered, creating a bold, edge-to-edge call-to-action. You might want this for hero sections, pricing tables, or any layout where a standard-sized button...

Fix the Flickr Typo in the Divi Social Media Follow Module

Sometimes it's the small things that make the difference... there is a minor typo in the Divi Social Media Follow module that was present in Divi 4, and (currently) remains in Divi 5. Specifically, the tooltip for Flickr is misspelled as "Flikr". Here's how to fix...

Add a Frosted-Glass Background Blur in Divi

Give your Divi layouts a polished, glassmorphism look by blurring the content behind a semi‑transparent Divi section, row or module. This effect enhances readability over busy or textured backgrounds while preserving the visual impact of your imagery and layout. In...

Customize Dot Navigation Colors, Size, and Border in the Divi Gallery Slider

Tailor the appearance of the dot navigation in the Divi Gallery module’s Slider layout by defining active and inactive colors, adjusting dot size, and applying a border to match your brand. Fine-tuning these details improves visibility, accessibility, and overall...

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