[Resolved] Active navigation change to a different colors

[Julia]

Hi Support!

I want my nav to be all white, except for when a page is active or hovered. Then I want them to have different colors. I want the drop down-menu to be the same color as the active page bar.

I’ve tried different things, but it doesnt work…

I’ve given each page a class, but what do I do next?

Thanks

Julia

[Julia]

Forgot to ad: I have a child theme!

[Tom]

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 */
}

[Julia]

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

[Tom]

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

[Julia]

When I’m on that page.

[Tom]

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 */
}

[Julia]

Perfect! THANK YOU!

[Tom]

You’re welcome 🙂

[Author]

Posts