Welcome! To use this support forum, please Login or Join Today!

   

Change Colour of ONE Menu Item

{name}
Rank

Total Posts: 14

Joined 2015-11-02

PM

 

Hi,

Can you please tell me how I can change the colour of only one Menu Item (top menu item).

If you look at the screenshot, I am using the blue theme, how can I change one menu item to say orange to make it stand out?

Thanks and Regards.

Pierre Barnard


Attachments:

https://www.filepicker.io/api/file/R7clBjXQREusrwvx2fFb

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you go to Appearance → Menus and select the menu you want to edit, then at the top right, check “CSS Classes”.
Now when you expand a menu item you’ll see a custom field for a CSS class. If you type the word “highlight” then you’ll be able to add the following CSS for unique styling.

#nav li.highlight a {
  
backgroundorange;
  
colorwhite;
  
text-shadow:none;
{name}
Rank

Total Posts: 14

Joined 2015-11-02

PM

 

Hi, thanks for the explanation.

I am just losing you at the last sentence. Please see screenshot. Where do I need to type “highlight” and wherer exactly do i enter the code?

Regards


Attachments:

https://www.filepicker.io/api/file/vELoZv0FR3mM3hkcpeg0

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Yes, just do what you’ve done but now you need to add the CSS to your stylesheet. Depending on your default style (style1?) e.g; style1.css. You may be able to get to it from Appearance > Editor.

{name}
Rank

Total Posts: 14

Joined 2015-11-02

PM

 

Great thanks, I got it working: http://firstforbitcoin.com/

Can you please tell me how I can change the color also to a darker orange shade when I hover over it? Instead of the default blue.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Just replace background: orange; with the hex color you’d prefer.

{name}
Rank

Total Posts: 14

Joined 2015-11-02

PM

 

No, I mean when I “HOVER” over the button the color goes back to BLUE. I need it to go to another shade of orange.

How can I do that please?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You would just add a hover property to the aforementioned CSS like so:

#nav li.highlight a {
  
backgroundorange;
  
colorwhite;
  
text-shadow:none;
}
#nav li.highlight a:hover {
  
background#000;
  
color#FFF;

And of course replace the hex values with your preference. The above example will give you a black background with white text.

{name}
Rank

Total Posts: 14

Joined 2015-11-02

PM

 

Great thanks. Works 100%.