Home Forums Basel – Premium Template Basel: CSS to replicate Header Organic on all pages

This topic contains 4 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #155258

    oleg_dmitriev
    Customer

    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!

    #155375

    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

    #155661

    oleg_dmitriev
    Customer

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

    Thank you for your great help!

    #155689

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

    Best Regards

    #191299

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.