Color Customization of one or more items in Main Menu

[seventalents]

How can I edit the color of one or more items in main menu? see attached screenshot.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. you can change color for all menu item in Claue > Theme Option > Color Scheme

2. If you want change for single menu item, please right click on menu item and inspect to menu item to know menu ID https://prnt.sc/vrcgc4 and add code to claue-child > style.css

.home .header__transparent .jas-menu > li#menu-item-66 > a {
	color: #222;
}

and change 66 with menu item ID number.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[seventalents]

Thanks Harry, it works if I add it to Claue > Theme Options > General Layout > Custom CSS.

How can I edit the hover color of the same item?

[Harry]

Hi,

Please change code to

.home .header__transparent .jas-menu > li#menu-item-66 > a,
.jas-menu > li#menu-item-66 > a,
.home .header__transparent .jas-menu > li#menu-item-66:hover > a,
.jas-menu > li#menu-item-66:hover > a {
	color: #222;
}

and change your ID number and color

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[seventalents]

Thanks Harry … the last questions regarding this topic:

1. Why it doesn’t work if I add the code to claue-child > style.css and it works if I add it to Claue > Theme Options > General Layout > Custom CSS?
2. If I leave the code in Claue > Theme Options > General Layout > Custom CSS, when I’ll update the theme do I lose my code?

[Harry]

Hi Seventalents,

I’m not sure why, can you please send me login credential to check.

The code you added in Claue > Theme Options > General Layout > Custom CSS not lose when you update.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[seventalents]

This reply has been marked as private.

[seventalents]

Besides I have noticed that the color for single menu item “PROMO” is red only on homepage, on other pages it isn’t red, why?

Finally how can change the color for single menu item on mobile version and add a badge for single menu item on mobile version?

 

[Harry]

Hi,

1. It now your site using header transparent option and it only work on homepage.

Please change code to

.home .header__transparent .jas-menu > li#menu-item-358 > a,
.jas-menu > li#menu-item-358 > a {
	color: #ff3e11;
}

to make it work on other page

2. Please use below code for mobile

#jas-mobile-menu ul li#menu-item-358 a {
	color: #ff3e11 !important;
}

I’m sorry on mobile it not support badge.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[seventalents]

The code for mobile doesn’t work

[Harry]

Please change code for mobile to

#jas-mobile-menu ul li.hot a {
	color: #ff3e11 !important;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[seventalents]

Great! it’s ok.

[seventalents]

Perfect!

[Author]

Posts