Basel: CSS to replicate Header Organic on all pages

Hi guys, I have two questions :))
1) can you please give me a global CSS to replicate Header Organic on all pages, including Product pages?
I found CSS for Woodmart (response #130812), can you please send me one for Basel?

body .whb-sticked .whb-color-dark:not(.whb-with-bg) {
background-color: black;
}
body .whb-sticked .main-nav .item-level-0 > a{
color:white;
}
body .whb-sticked .main-nav .item-level-0 > a:hover{
color:red;
}
body .whb-sticked .main-nav .current-menu-item > a{
color:red;
}
body .whb-sticked .woodmart-header-links .item-level-0 > a,
body .whb-sticked .search-button > a,
body .whb-sticked .woodmart-wishlist-info-widget > a,
body .whb-sticked .woodmart-shopping-cart > a {
color:white;
}

2) How to Add black header background on the Product page, under the Header Organic, because by default the background is white, and it will be white text on white background?

Thank you!

Hello,

Please add this code to the Theme Settings > Custom CSS > Global for the sticky header:

body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll {
    background-color: red;
}
body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:yellow;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a{
color:blue;
}
body .main-header.header-has-no-bg.act-scroll .menu > li > a:after{
color:blue;
}

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:yellow;
}
body .main-header.header-has-no-bg.act-scroll .right-column>div ul li a, 
body .main-header.header-has-no-bg.act-scroll .right-column>div>a {
    color: white;
}
body .main-header.header-has-no-bg.act-scroll .right-column  .amount {
    color: #f7f7f7;
}

Set the colors as per your needs.

Best Regards

Elise, thank you!
I posted the CSS as you suggested and changed colours to match the style. Perfect!!!

Thank you for your great help!

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

Best Regards

Hello,

You home page and other pages have the overlap header, it is transparent and then gets black with the white text.

All the woocommerce tamplates have the header above the content. So this code is for all woocommerce template:

body.woocommerce .sticky-header.act-scroll {
    background-color: yellow;
}
body.woocommerce .sticky-header.act-scroll {
    background-color: yellow;
}
body.woocommerce  .sticky-header.act-scroll .menu>li.current-menu-item>a{
color:red;
}

body.woocommerce  .sticky-header.act-scroll .menu > li > a{
color:green;
}
body.woocommerce  .sticky-header.act-scroll .menu > li > a:after{
color:green;
}

body.woocommerce .sticky-header.act-scroll .menu > li > a:hover{
color:red;
}
body.woocommerce .sticky-header.act-scroll .right-column > .search-button a{
    color: red;
}
body.woocommerce .sticky-header.act-scroll .right-column>div>a {
    color: red;
}

Remove the previous code and set the colors as per your needs.

Best Regards

[Author]

Posts