Active navigation change to a different colors

Forgot to ad: I have a child theme!

Hi Julia,

The best and easiest way is to use the Colors add-on – it lets you do this all through the customizer.

Otherwise, you can use the current-menu-item class:

.main-navigation .main-nav ul li.current-menu-item a {
      background-color: yellow; /* or use a hex code to be more specific */
      color: #000000; /* this is the text color */
}

Hmm, it changes the color, but not in the way I want. I want it to change color when you hover the page link or when you’re on that page. Sorry for my english.

Solved the hover problem with:

.main-navigation .main-nav li.home a:hover {
background-color: yellow; /* or use a hex code to be more specific */
color: #000000; /* this is the text color */
}

but how do I do if I want it to stay yellow, and not darkgrey like the default settings?

Thanks,

Julia

When do you want it to be yellow? All the time? When you're on the page?

When I'm on that page.

My code here will apply to any menu item when you're on the page: https://generatepress.com/forums/topic/active-navigation-change-to-a-different-colors/#post-165799

This code will apply to your .home menu item when on the page:

.main-navigation .main-nav ul li.home.current-menu-item a {
      background-color: yellow; /* or use a hex code to be more specific */
      color: #000000; /* this is the text color */
}

Perfect! THANK YOU!

You're welcome :)