[pip.partridge]

Hi there ,..

Great theme. Love the fonts.

Could you help me with the Css code to change the hover colour and also selected highlight colour for the primary menu text please?

Its currently #89a452 a sage green. A colour that I don’t want to appear anywhere on the site if possible.

Many Thanks

Philip – url : http://seachangeadvocacy.co.uk

[Theme Horse Support Team]

Hi Pip.partridge,
To change the hover color and also selected highlight color for the primary menu text
Go to Appearance -> Customize -> Ambition theme options -> Custom CSS paste the below CSS code and Click on Save & Publish button at the top of the options panel.

.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a,
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
	color: #89a452;
}

Note: Please change above HEX color code #89a452 to your own HEX color code to change the color of the primary menu.

Also, If you upgrade the theme to pro version then you can set the color skin of each section with your own color also with lots of features.
Pro version will be available very soon.

Thank you for using our theme.

[pip.partridge]

Thank you for your prompt reply . I have added :

.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a,
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
color: #00ffff;
}

But the code does not seem work.

Any ideas? The menu is definitely set as primary

Phil.

[Theme Horse Support Team]

Hi Phil,

Sorry for that we forget that the character > will not support in the custom CSS for security reason.
So, Now you have to create the child theme and use above override CSS code.

To create the child theme create a new folder name ambition-child.
Also create a style.css inside ambition-child folder and paste the below CSS code:

/*
Theme Name: Ambition Child Theme
Author: Theme Horse WordPress User
Template: ambition
*/
@import url("../ambition/style.css"); 
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a,
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li:hover > a,
.main-navigation ul li.current-menu-item ul li a:hover {
   color: #00ffff;
}

Now activate your child theme ambition-child via dashboard and also do not delete the main theme ambition because it will be a parent theme of your child theme ambition-child.

Hope it will help.

Thank you!

[Author]

Posts