Header Overlap Color Change from sticky header

Hey guys,
I’d like to change the colour scheme from default header overlap to sticky header.
For instance:

Basic Header (transparent): White Logo, fonts and icons
Sticky Header (white background): Black logo, fonts and icons

I looked for it everywhere in theme options but I can’t find it.

Would it be possible to change it with some CSS tweaks?

I want something similar to this:
https://www.etq-amsterdam.com/

Hello,

You can upload one logo for default header and one for the sticky header in the Logo element of the Header builder http://prntscr.com/mges9m

Please provide your site URL. If your site is under maintenance, please provide your site admin access.

Best Reegarsa

Thank you,
but I would like to change fonts and icons color too when scrolling.
Is that possible?

Hello,

Please provide your site URL. If your site is under maintenance, please provide your site admin access we shall provide custom CSS.

Best Regards

Hello,
Is it possible to share this code so that I can implement it as well?

Hello,

Here is the code for the sticky header. As for the default header you can configure in the row settings.

/*sticky background*/
body .whb-sticked .whb-general-header {
    background-color: white;
}
/*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
}

Best Regards

[Author]

Posts