Home Forums WoodMart support forum How to change sticky header to light version?

How to change sticky header to light version?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #134139

    Bengal
    Participant

    Hi,

    The sticky header is now dark colored. How am I able to change this to the light version?

    #134168

    Hello,

    Please find the option description here: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/ You need to switch to the Color tab and set the color of the row as per your needs.

    Best Regards

    #136034

    Bengal
    Participant

    Hello,

    Color has been changed but it does not change the color of the sticky header.
    http://prntscr.com/ooi74r

    Header is still black:
    http://prntscr.com/ooi7br

    Kind regards!

    #136136

    Hello,

    Here is CSS for sticky header, add this code to the Theme Settings > Custom CSS > Global:

    /*sticky background*/
    body .whb-sticked .whb-general-header {
        background-color: grey;
    }
    /*sticky main menu color*/
    body .whb-sticked .woodmart-navigation .item-level-0.current-menu-item>a{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a{
    color:orange;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0>a:hover{
    color:yellow;
    }
    body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children>a:after{
    color:orange;
    } 
    body  .whb-sticked  .woodmart-navigation .item-level-0.menu-item-has-children:hover >a:after{
    color:yellow;
    } 
    body  .whb-sticked  .woodmart-navigation .item-level-0>a .nav-link-text:after {
        background-color: yellow;
    }
    
    /*My Account*/
    body  .whb-sticked  .woodmart-header-links .item-level-0>a {
        color: orange;
    }
    body  .whb-sticked  .woodmart-header-links .item-level-0>a:hover {
        color: yellow;
    }
    /*Search*/
    body  .whb-sticked  .search-button >a {
        color: orange;
    }
    
    body  .whb-sticked .search-button:hover>a {
        color: yellow;
    }
    /*wishlist*/
    body  .whb-sticked  .woodmart-wishlist-info-widget .wishlist-icon {
    color:orange;
    }
    body  .whb-sticked .woodmart-wishlist-info-widget .wishlist-count{
        color: red;
            background-color: yellow;
    }
    /*cart*/
    body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-icon {
    color:orange;
    }
    body  .whb-sticked  .woodmart-cart-design-5 .woodmart-cart-number{
        color: red;
            background-color: yellow;
    }
    body  .whb-sticked  .woodmart-shopping-cart .woodmart-cart-subtotal .amount {
        color: red;
    }
    /*compare*/
    body  .whb-sticked  .woodmart-compare-info-widget .compare-icon {
    color:orange;
    }
    body  .whb-sticked  .woodmart-compare-info-widget .compare-count{
    color:yellow;
    background-color:orange
    }
    body   .whb-sticked  .woodmart-cart-design-2 .woodmart-cart-number{
            color: yellow;
    background-color:orange
    }

    Please set the colors as per your needs.

    Best Regards

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