Styling the Main Header Sub-Menu Items (Separately)

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; 
}
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;
}

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

9 Comments

  1. So helpful! Works perfectly. Thank you!

    Reply
    • You're very welcome, Doug!

      Reply
  2. 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
    • Thanks for sharing, Jamie. Much appreciated!

      Reply
  3. Thanks for the useful information.
    Could you please tell How to make just bold the items in submenu?

    Reply
    • Hi makin, I've just updated the post with a section on making the submenu items bold. I hope it helps!

      Reply
  4. Working great! Thanks!!

    Reply
  5. thank you.. its perfectly working

    Reply
  6. Useful! Thank you! Been looking for this!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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