Basel: fix CSS to make Sticky Header backgrond to switch to black

yes, you are right!

On the Shop page, the Header is not above content. The text color is Inherit, and it does not switch to black https://ibb.co/s37fKfw

On the Homepage, the Header is above the content, and the text color is Light. https://ibb.co/5BP8gpQ

Elise,
this should like this
– For pages with “Header above the Content”: Header starts from transparent background -> scroll down, it goes to sticky with black background + Light text

– For pages without “Header above the Content”: Header starts from white background, Inhetir text color -> scroll down, it goes to sticky with black background + Light text

Can you please correct my CSS (from the first post in the series) for this?

Elise,
thanks! just to double-check, so are you saying that I should replace this “old code”:

– – – OLD CODE – – –

/*Set Header Organic on all pages */
body .main-header.header-has-no-bg.color-scheme-light.act-scroll {
background-color: black;
}

body .main-header.header-has-no-bg.act-scroll {
background-color: black;
}

body .main-header.header-has-no-bg.act-scroll .menu>li.current-menu-item>a{
color:#c41e3a;
}

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

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

body .main-header.header-has-no-bg.act-scroll .menu > li > a:hover{
color:#c41e3a;
}

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

– – – END OF OLD CODE – – –

…with this new code:

– – – NEW CODE – – –

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

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

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

– – – END OF NEW CODE – – –

Elise thank you for your support!

The WooCommerce pages now work how they should. This is nice.
https://www.independent.wine/wine-shop/

1) However, the Posts do not (I think the CSS was only for Woo, and would not touch the blog).
Example: https://www.independent.wine/2020/04/28/light-sharp-and-fruity-what-to-pair-with-roero-arneis/

Can you please send me CSS for the posts?

2) Also, you added a nice piece of CSS for the “li.current-menu-item”, which allows to highlight the menu item where I am now in some color (red for example). It’s so nice. But it does not work on Pages or Posts (it only works on Woo).

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

Can you please send me CSS to make the same effect on Pages?

Thank you!

Elise,

Thanks for the suggesting CSS for the Single posts and for the Woo / shop pages – it works really well!

Can you suggest similar CSS (black background) for the “Cart” and “Checkout” pages – for some reason the body.woocommerce .sticky-header.act-scroll does not apply to those pages:

https://www.independent.wine/cart/
https://www.independent.wine/checkout/

(as you can see, it works well on Single Product pages https://www.independent.wine/product/barolo-docg-nebbiolo-2015-francone-italy/)

Thank you! that’s perfect