Adding a custom class to .current-menu item

[definemedia]

Hello,

I wonder if anyone can help me with something that I am trying to resolve.

The website I am working on has two menus based on the .genesis-nav-menu functionality.

One menu requires blue text, just for the static state for which I have added a class called .custom-menu via the core worpdress functionality in the menu section ( this was a great find by the way, from the options menu).

I am struggling however to apply the custom class to the .current menu item, the hover state seems to work fine but try as I like I can't get it to retrain the black text hover colour text when I navigate away from the menu item.

Am I missing something really obvious here ?

.genesis-nav-menu .custom-menu a {
color: #8FC3DA;
}

.genesis-nav-menu .custom-menu a:hover,
.genesis-nav-menu .custom-menu .current-menu-item > a {
color: #000;
}

Any help greatly appreciated.

Maria

http://tka.definemedia.co.uk/

[Victor Font]

The class that displays on your upper menu is current_page_item not current_menu_item.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[definemedia]

Hi Victor,

Thanks for the response - I am however struggling to understand where the current_page_item is. When I check it in developer tools the menu reads as.

.genesis-nav-menu a:hover, .genesis-nav-menu .current-menu-item > a {
background-color: #fff;
color: #000;
}

Where do i find the css that relates to current-menu_item ...

Apologies is this is something way too obvious !

Basically I am trying to gain control over the hover and active states in the blue menu to tweak then a little.

Many thanks,

Maria

[Author]

Posts