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

Hi Elise,

Hope you are keeping safe despite the Corona!
Can you please help: how to correct CSS, so that sticky header background switches to black?

– Before, you sent me CSS to make sticky header to switch to black (on some pages, I have Header with Light text, on other pages, I have it with Dark text, and when user scrolls down I want sticky header to have black background, with Light text). Here it works how I want it: https://www.independent.wine/

– Last week, you sent me CSS to add a flag icon next to the Cart widget area. Now, the sticky Header background is not switching from white to black (if it was white). Because of this, the logo which has white text does not show.
https://www.independent.wine/wine-shop/

How to fix CSS, to make sticky header to switch to black?

– – – – MY CUSTOM CSS – – – –
.vc_tta-panel-title {
background-color: #778899;
}
.vc_tta-title-text {
color: white;
}
.wpb-js-composer .vc_tta.vc_general .vc_active .vc_tta-panel-title {
background-color:#C41E3A;
}

.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active
.vc_tta-panel-heading .vc_tta-controls-icon::after,
.wpb-js-composer .vc_tta-color-grey.vc_tta-style-classic .vc_active
.vc_tta-panel-heading .vc_tta-controls-icon::before {
border-color: white!important;
}

.vc_tta-panel-title:hover {
background-color: #C41E3A;
}

.l-em {
color: #C41E3A;
}

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

/*Make mobile “Menu” icon (three bars) in Header show as white */
body .act-scroll .mobile-nav-icon .basel-burger,

body .act-scroll .mobile-nav-icon .basel-burger::after,

body .act-scroll .mobile-nav-icon .basel-burger::before {

background-color: white;

}
/*Add flag next to Shopping Cart*/
body .right-column > div.shopping-cart {

display: inline-block;

margin-left: 10px;

vertical-align: middle;

padding-left: 30px;

padding-left: 30px;

margin-right: 10px;

background-image: url(https://www.independent.wine/wp-content/uploads/2020/04/uk-flag-25×25-1.png)!important;

background-position: 0 0!important;

background-repeat: no-repeat!important;

}

Hello,

I am checking your site now it does not switch to the black on the shop page https://gyazo.com/74c85e50349664aa2a6c11071df1022c

Please clarify the issue.

Best Regards

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

Hello,

Please advise how should be the shop page and the home page?

Best Regards

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?

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

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 – – –

Hello,

That is right. The new code would be applied to all the Woocommerce templates. I have checked and see all of them have the header above the content.

Best Regards

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?

Hello,

Here is the code for the single post:

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

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

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

For the current item:

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

Best Regards

Thank you!

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

Best Regards

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/)

Hello,

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

/*checkout*/

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

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

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

/*cart*/

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

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

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

Best Regards

Thank you! that’s perfect

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

Best Regards

[Author]

Posts