Change transparent top menu light after scrolling down to dark

Hi there,

In the past you had an option to start with transparent header light text and when the sticky header goes down – the version changes to dark.

Can you please advise how to make it or send me CSS that will do the job?

Thank you!

Hello,

You need to set the overlap header and leave the initial transparent background:

1. Overlap header – https://xtemos.com/docs/woodmart/header-builder/enable-header-overlap/

2. Enter the row settings and set the transparenthttps://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/ background:

Best Regards

Thank you.

I have no problem setting up the overlap header or transparency.

What I’m looking for is to start with light version of the menu and once I scroll down the sticky menu color should change to the dark one.

I couldn’t figure out how to do it.

Can you please advise?

Thank you!

Hello,

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

body .whb-sticky-prepared .whb-main-header {
    background:white;
}

You should have the header overlap enabled and remove all the colors in the row settings, the row should be transparent in the header settings. If it still does not work, please provide your site admin access to the private area for me to check.

Best Regards

Thank you but my apoligies, let me explain – I wish for the text menu to be light and then on scroll to become dark as it is. The text, not the background color (which is already transparent).

Can you please advise with the code?

Thank you!

Hello,

1. Configure your header in the default state (not scrolling) in the Woodmart > Header Builder.

2. Add this code and change the colors as per your needs for the sticky menu:

/*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
}

Best Regards

[Author]

Posts