Main Menu font color while on overlay mode and then change when scroll down

I have a transparent/overlay header. However, I want the text to be WHITE, and when scroll down to switch to black.

As mentioned, I have a sticky menu – I want to show black (current) text – because the background of the sticky header is white.

Attachments:

You must be logged in to view attached files.

Hello,

Please set the light color in the Header builder for the default (not sticky) header.

Please add this code to the Theme Settings > Custom CSS > Global to change the background and colors of all the items:

/*sticky background*/
body .whb-sticked .whb-general-header {
    background-color: green;
}
/*sticky main menu color*/
body .whb-sticked .woodmart-navigation .item-level-0.current-menu-item>a{
color:yellow;
}
body  .whb-sticked  .woodmart-navigation .item-level-0>a{
color:yellow;
}
body  .whb-sticked  .woodmart-navigation .item-level-0>a{
color:orange;
}
body  .whb-sticked  .woodmart-navigation .item-level-0>a:hover{
color:yellow;
}
body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
color:orange;
} 
body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
color:yellow;
} 
body  .whb-sticked  .woodmart-navigation .item-level-0>a .nav-link-text:after {
    background-color: yellow;
}

/*My Account*/
body  .whb-sticked  .woodmart-header-links .item-level-0>a {
    color: orange;
}
body  .whb-sticked  .woodmart-header-links .item-level-0>a:hover {
    color: yellow;
}
/*Search*/
body  .whb-sticked  .search-button >a {
    color: orange;
}

body  .whb-sticked .search-button:hover>a {
    color: yellow;
}
/*wishlist*/
body  .whb-sticked  .woodmart-wishlist-info-widget .wishlist-icon {
color:orange;
}
body  .whb-sticked .woodmart-wishlist-info-widget .wishlist-count{
    color: red;
        background-color: yellow;
}
/*cart*/
body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-icon {
color:orange;
}
body  .whb-sticked  .woodmart-cart-design-5 .woodmart-cart-number{
    color: red;
        background-color: yellow;
}
body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-subtotal .amount {
    color: red;
}
/*compare*/
body  .whb-sticked  .woodmart-compare-info-widget .compare-icon {
color:orange;
}
body  .whb-sticked  .woodmart-compare-info-widget .compare-count{
color:yellow;
background-color:orange
}
body   .whb-sticked  .woodmart-cart-design-2 .woodmart-cart-number{
        color:yellow;
background-color:orange
}

Replace the colors as per your needs and remove unnecessary styles.

Best Regards

This answer helped me too. It’works.

Elise Noromit Thanks 😉

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts