How to change sticky navigation color and hover effects?

Hi there,

Since you are using a header element on every page already, you can turn on the merge option:
https://docs.generatepress.com/article/header-element-overview/#site-header
https://docs.generatepress.com/article/header-element-overview/#merge-with-content

Then set specific navigation colors for the header element which will apply to the static navigation:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

Then the sticky navigation will inherit the setting from the customizer.

Similar example here:
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

Let me know if this helps :)

Thanks for the answer, Leo. I'm not sure I quite understood, do I have to do this for every page in which I have a hero banner?

If so, that would be too time-consuming as I have a different hero banner for every page and over 60 pages and I would also like the sticky navigation to work on posts pages that don't have hero banners.

Can I get a CSS that will make the menu bar black when users scroll down (sticky navigation) and the menu field to turn white on hover, while the menu text would be white and the hover text color would be black?

Hi there,

try this CSS:

.main-navigation.navigation-stick,
.main-navigation.navigation-stick ul ul {
    background-color: #000;
}

.main-navigation.navigation-stick .main-nav ul li a,
.navigation-stick .menu-toggle {
    color: #fff;
}

.main-navigation.navigation-stick .main-nav ul li:hover>a,
.main-navigation.navigation-stick .main-nav ul li:focus>a,
.main-navigation.navigation-stick .main-nav ul li.sfHover>a,
.main-navigation.navigation-stick .main-nav ul li[class*="current-menu-"]>a {
    background-color: #fff;
    color: #1e72bd;
}

Thanks, David, it worked

You're welcome

Hi David, I just noticed that when on mobile, when I click on the menu button while browsing, the background and the letters are both white and this makes the menu items invisible. How do I make the menu items black without messing up any of the settings we previously set with the above-mentioned code?

Have you solved this?

The menu seems fine to me:
https://www.screencast.com/t/V1T9Rx3brjh

yup, I got it.

Awesome :)