Styling the Main Header Sub-Menu Items (Separately)

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

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

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

5 Comments

  1. 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
  2. Working great! Thanks!!

    Reply
  3. thank you.. its perfectly working

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

    Reply

Submit a Comment

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