Sticky header background color

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

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

Author

Posts

September 17, 2019 at 4:41 pm #144710

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

September 17, 2019 at 7:44 pm #144734

Elise Noromit

Staff

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

September 23, 2019 at 12:54 pm #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?

September 23, 2019 at 7:19 pm #146195

Elise Noromit

Staff

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

March 2, 2021 at 1:35 pm #270391