Change menu item colour

Support
#1

Hi,

I’ve been trying to find out how to change the colour of a single menu item. I’ve managed to change the background colour, but for some reason I can’t change the text colour to white.

This is the website https://www.dragonhockey.co.uk

I’m trying to change the menu item “Sale” under “Products”

#2

Hello @macca_andy,

You can add a class to the menu item then add an Element CSS to the Inline Navigation.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to your Pro Header and find the Inline Navigation element then add this code to the Inline Navigation’s Element CSS:

$el .highlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: #000;
}

Please feel free to change the color value in the code above.

Hope this helps.

#3

HI,

Thanks so much for the quick reply. I think I’ve done as you’ve said, but unfortunately it hasn’t worked. I’ve attached a few screenshots so you can see.

#4

Hey @macca_andy,

Based on the screenshot, it seems that the code you have added is:


$el .hightlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: white;
}

instead of:


$el .highlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: white;
}

Notice that the previous code has hightlight instead of highlight so kindly correct it.

Thank you.

1 Like
#5

Ah. I see thank you.

I don’t suppose you know why it isn’t working on mobile do you?

#6

Hello @macca_andy,

To do that, you will have to add this code to the Element CSS of the Navigation Collapsed element:

$el.x-menu .highlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: white;
}

Hope this helps.

#7

I did do that, but it wasn’t changing the background colour of the menu item to red?

#8

Hi @macca_andy,

If you want the color to be red, you will have to update the code’s color value to red instead of white like this:

$el.x-menu .highlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: red;
}

Hope this helps.

#9

Hi,

I understand that, but that’s just changing the font colour. I want to change the background colour of that section to be red, but the font colour to be white. I’ve tried background: red; but it doesn’t work. Have a look at the screenshot i sent. It seems to only have the left hand side as red

#10

Hello @macca_andy,

Please try:

$el.x-menu .highlight a .x-anchor-content {
    background-color: red;
}

$el.x-menu .highlight a .x-anchor-content .x-anchor-text .x-anchor-text-primary {
  color: white;
}

Hope this helps.

1 Like
#11

That worked perfectly. Thank you very much.

Do you mind explaining how you worked out what to do? So I could do this next time and not have to ask.

#12

Hello @macca_andy,

Thanks for updating the thread. :slight_smile:

I believe you are referring to how my colleague Jade found out the relevant CSS class selectors. Actually we use Google Chrome or Firefox dev tools to find out the class. I am sharing few resources that you can take a look at get started.

Google Chrome: https://developers.google.com/web/tools/chrome-devtools/

Firefox: https://developer.mozilla.org/en-US/docs/Tools

In above answer $el is the element selector. To learn more, please take a look at following resource:

Thanks.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.