Sticky header background color

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.

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

Hi,

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

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

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.

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

Hello, I also 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 the menu, search, account and cart icons, need help please.

Attachments:

You must be logged in to view attached files.

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

[Author]

Posts