How to change sticky navigation color and hover effects?

[Daniel]

Hi, I have sticky navigation enabled on my website and I want the menu bar to have one background color when the user opens the website (white) and another background color as they scroll down (black).

Also for, the sticky navigation, I want the background hover color to be white, the text color to be white, the hover text color to be blue and the same settings (white background blue text) to apply to the current field the user is on.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

Thanks, David, it worked

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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?

[Leo]

Have you solved this?

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

yup, I got it.

[Leo]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts