[Support request] Different color in the sticky menu

[Simone]

Hi

Is it possible to make the sticky menu in a different color when scrolling down the page?

Thank you!

[David]

Hi there,

can you link us to your site so i can take a look at the simplest method ?

[Simone]

Yes, sure: https://getmoresteps.com/

[David]

Takes some CSS:

/* Set Background of navigation bar */
.sticky-enabled .main-navigation.is_stuck {
    background-color: #000000;
}

/* Set menu item colors */
.sticky-enabled .main-navigation.is_stuck .main-nav ul li>a {
    color: #ffffff;
    background-color: #000;
}

/* Set meni item current and hover color  */
.sticky-enabled .main-navigation.is_stuck .main-nav ul li:hover>a,
.sticky-enabled .main-navigation.is_stuck .main-nav ul li[class*="current-menu-"]>a {
    color: #000000;
    background-color: #ffffff;
}

[Simone]

Thanks a lot. Where should I put this code?

[Leo]

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

[Artur]

David i use that css
/* Set Background of navigation bar */
.sticky-enabled .main-navigation.is_stuck {
background-color: #000000;
}

/* Set menu item colors */
.sticky-enabled .main-navigation.is_stuck .main-nav ul li>a {
color: #ffffff;
background-color: #000;
}

/* Set meni item current and hover color */
.sticky-enabled .main-navigation.is_stuck .main-nav ul li:hover>a,
.sticky-enabled .main-navigation.is_stuck .main-nav ul li[class*=”current-menu-“]>a {
color: #000000;
background-color: #ffffff;
}

But on mobile mine header is only white.

[Ying]

Hi Artur,

Can you open a new topic and link us to your site?

The CSS is site dependent as you might not be using the same settings as the topic starter.

[Author]

Posts