Hide header only on overlap, but visible on sticky

Hi!

I would like to know how I can hide the home’s header logo only when the page loads (with a transparent header, overlap), but then when I scroll down and the sticky appears, so does the logo.

Meaning, I would like to have my logo in the header builder but only hide it when it’s overlapped and not when it’s sticky.

Regards!

Hello,

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

body .woodmart-logo-wrap{
display:none;
}
body .whb-sticked .woodmart-logo-wrap{
display:inline-block;
}

Best Regards

Thanks!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

It worked perfect for the home header, but it also applied it to other headers I have (I use different headers for different sections). Need this only for the home’s header, where I use the overlap option. On the rest I don’t need this.

How can I achieve that?

Regards,

Hello,

Please replace the code with this one:

body.home .woodmart-logo-wrap{
display:none;
}
body.home .whb-sticked .woodmart-logo-wrap{
display:inline-block;
}

Best Regards

Now it’s great, thanks!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts