Different colors to menu items


I was wondering if it would be possible to assign different colors to menu items (depending on category)?

I have several categories in my menu, it would be nice to change the colors of these menu items to the same colors as the category colors from the carousel etc.

Thanks a lot!

Hello there,

Since the main menu items colors has separate color which is defined in the main theme’s CSS, the easiest way to color your category menu is to use CSS code. To target specific category name, you can use the title attribute selector.

#site-navigation .navbar-nav a:hover {
  color: #000 !important;

#site-navigation .navbar-nav a[title="News"],
.mob-menu a[title="News"] {
  color: #ff0000;

#site-navigation .navbar-nav a[title="Sports"], 
.mob-menu a[title="Sports"] {
  color: #fff000;

#site-navigation .navbar-nav a[title="Lifestyle"], 
.mob-menu a[title="Lifestyle"] {
  color: #f59936;

The code above sets individual color for News, Sports and Lifestyle category menu items. Replicate that code and adjust the menu title values.

To apply extra custom CSS code to your site, add it to Appearance > Customize > Additional CSS from your site dashboard.

I hope this reply helps.


Great!! Thanks a lot.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.