Update individual menu link style

[brooklynkid]

Hi,

I was trying to figure out how I could update the style of just one link on the main menu of my site to highlight that particular link.

I searched the forums and was only able to find a CSS suggestion for one of the other themes that didn’t work on my site which is based on the Cardinal theme.

1) How could I change the color and style i.e. bold of just the “We’re Hiring!” link on my site – http://allresort.com/

2) Would there be a way to update the styling so that the link almost looked like a button i.e. create a border around the link text?

Thanks for your assistance. Love your themes.

Will be purchasing the new Atelier them for a new project. :-).

[Kyle – SUPPORT]

Hi

To target that menu item, you can use the class of the menu item, for e.g:

.menu-main-menu-container .menu-item-2228 > a {
  your css here
}

– Kyle

[brooklynkid]

Great! That worked perfectly.

Thanks Again Kyle!

[Rui Guerreiro – SUPPORT]

Great. Thanks Kyle
-Rui

[Stijn]

Related to this, how could I achieve the same effect for the overlay menu?

Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Use the code below, replace the color and add your desired rules.

#overlay-menu nav ul li a, .overlay-menu-open a.overlay-menu-link {
    color: #afafaf;
}

-Rui

[Stijn]

Thanks for the quick response. How would this work if I want the different categories/menu items to be different colours? Where/how would I insert: .menu-item-XXXX?

Cheers!

[Rui Guerreiro – SUPPORT]

Hi,

It’s better to provide a specific example with your site link so we can check the menu items class.

-Rui

[Stijn]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

can’t load that link. Can you check again?

-Rui

[Stijn]

Strange. I have taken maintenance mode off, and am able to access from my side when logged out. Should be working?

[Kyle – SUPPORT]

Here:

#overlay-menu nav ul li.menu-item-21 a {
    color: #afafaf;
}

– Kyle

[Stijn]

Thank you Kyle, much appreciated!

Stijn

[Kyle – SUPPORT]

No problem 🙂