Change colour of only one menu item button

Hi there,

In my header, I have a button that says ‘Cover Plan - Book Online’ - I’d like this button to be orange with the rest of them to remain blue as they are. I am using Pro Headers. How can I achieve this? They are all part of the same menu.

I have followed the instructions on the following post but they didnt work ( have kept the class as ‘btn’ and kept in the custom CSS in my Customiser so you can troubleshoot)

Many thanks for your help in advance.

http://simplysignspreview.com/gasforcedirect/

Hello Jayd,

Thanks for reaching out. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

li#menu-item-211 .x-anchor-text-primary {
    color: #ffa500;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Hi there,

Thanks for your help.
I already know how to do basic CSS, so thanks for the youtube videos.

I was looking to make the background colour of the button orange, not the text.
I’ll see if I can do inspect element and find out what the CSS is for this, as now I know I need to use the menu ID in order to attach the code to that. Thanks.

Hey Jayd,

It looks like you have added a class btn to the Cover Plan - Book Online. So what you can do is to add this code to the Element CSS field of the Navigation Inline element in the header builder.

$el.x-menu > li.btn > .x-anchor {
    background-color: #ffa500 !important;
}

Also, I have double checked and it seems that you have added the class btn to the Cover Plan - Book Online and Basket menu items, so if you want the background color orange to only the Cover Plan - Book Online menu item, add a unique class to the menu item and change btn in the code above.

Hope this helps.

Hi there,

That’s done it! Thanks.

You’re most welcome, Jayd. Have a nice weekend!

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