Home Forums WoodMart support forum Sticky header background color

Sticky header background color

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #400762

    RonaldSama
    Participant

    Hello, I want to change the color of the sticky header, I tried the custom css code and if it changes the color of the background, but it does not change the color of text the menu, search, account and cart icons, need help please.

    I used this code code to the Theme Settings > Custom CSS > Global:

    /*sticky background*/
    body .whb-sticked .whb-general-header {
        background-color: white;
    }
    /*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
    }
    • This topic was modified 2 years, 2 months ago by RonaldSama.
    Attachments:
    You must be logged in to view attached files.
    #400781

    Hello,

    Thank you very much for choosing our theme and for contacting us.

    Please insert the site admin access into the Private content below the message area. We will provide the correct CSS.

    Best Regards

    #400784

    RonaldSama
    Participant

    I’m sorry, but I’m working in localhost, I still do not have hosting or domain, and it’s not possible to give you admin access, could you please give me directions here please.

    #401010

    Hello,

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

    /*sticky background*/
    body .whb-general-header {
        background-color: grey;
    }
    /*sticky main menu color*/
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.current-menu-item>a, 
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.wd-active > a, 
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.active> a {
        color: blue;
    }
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.current-menu-item>a:after, 
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.wd-active > a:after, 
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.active> a:after {
        color: blue!importat;
    }
    body .whb-sticked .wd-nav[class*="wd-style-"] li:hover>a {
        color: green;
    }
    body .whb-sticked .wd-nav[class*="wd-style-"] li:hover > a:after {
        color: green!important;
    }
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.wd-has-children:hover > a:after, 
    body .whb-sticked .wd-nav[class*="wd-style-"]>li.menu-item-has-children:hover > a:after {
        color: red;
    }
    body .whb-sticked .wd-nav[class*="wd-style-"]>li>a {
        color: red;
    }
    
    /*My Account*/
    body .whb-sticked .wd-tools-element> a {
        color: green;
    }
    
    /*Search*/
    body  .whb-sticked  .search-button >a {
        color: green;
    }
    
    body  .whb-sticked .search-button:hover>a {
        color: green;
    }
    /*wishlist*/
    body  .whb-sticked  .wd-wishlist-info-widget .wishlist-icon {
    color: green;
    }
    body  .whb-sticked .wd-wishlist-info-widget .wishlist-count{
        color: red;
            background-color: yellow;
    }
    /*cart*/
    body  .whb-sticked  .wd-shopping-cart .woodmart-cart-icon {
    color: green;
    }
    
    /*compare*/
    body  .whb-sticked  .wd-compare-info-widget .compare-icon {
    color: green;
    }

    If the code does not work, contact us when the site is live.

    Best Regards

    #401166

    RonaldSama
    Participant

    works perfectly, thanks

    #401268

    You are welcome! We are here to help.

    Wish you a wonderful day!

Tagged: 

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

The topic ‘Sticky header background color’ is closed to new replies.