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

This topic contains 3 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 week, 2 days ago.

Viewing 4 posts - 1 through 4 (of 4 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

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

You must be logged in to reply to this topic.