Home Forums WoodMart – Premium Template Sticky header background color

Tagged: 

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

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

    customcreation
    Customer

    Hi,
    I am using Decor template the home page sticky header (header decor) is white whereas the other pages have transparent background (header decor overlap). I want to change background color for both but cant find the settings in the header builder.

    Private Content Hidden
    #144734

    Hello,

    You can set the custom header in the page settings. Please find how to do that here: https://xtemos.com/docs/woodmart/header-builder/set-different-header-specific-page/

    Best Regards

    #146123

    customcreation
    Customer

    Hi,

    I know how to change/create the headers, I’m asking how do I change the background color of the sticky header?

    #146195

    Hello,

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

    There is no option to set the color for the sticky header, the sticky header is changed by custom CSS, you will have to change the color of the menu and other elements as well.

    Please add this 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
    }

    Set the colors as per your needs.

    Best Regards

    #270391

    Dejan
    Customer

    Hi xTemos! 🙂

    I tried your code but in the sticky header the hover on dropdown links makes the links white, is there any way to make them black as the rest? thanks

    Attachments:
    You must be logged in to view attached files.
    #270448

    Hello,

    I am checking your site the colors are the same on sticky and the default header: https://gyazo.com/10eae638c35f799a49f2492becd7e93c

    Please clarify how can I see the problem. The code provided above contains the menu links on the hover.

    Best Regards

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

You must be logged in to reply to this topic.