Sticky header

Hi there,

I would like to have my top header and main header non-sticky which is the case and have the bottom header sticky but only visible when it activates as sticky.

I’ll attach a screenshot to show you what I mean.
So in this screenshot the transparent header (top header + main header) Works fine ( visible in static and once I scroll it disappears) and the bottom header with black background I would like it to be visible only as sticky when I scroll so it replaces the transparent one.

Thank you for your help

JP

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

You can try disabling the sticky header clone option from WoodMart >> Header Builder.

Screenshot for Clarification: https://ibb.co/w7Zzs6S

Then you can try setting the row you want to set as sticky by editing.

If still unable then provide with the URL of the page to check it myself and help you out accordingly.

Best Regards.

Hi I tried what you suggested but it didn’t work.
I am not sure how to edit the header row?
Should I disable the “construction mode”?

Thank you for your help.

Hello,

I have tried to visit your website but the maintenance mode is enabled. Please disable the maintenance mode to check it myself and help you out accordingly.

Screenshot for Clarification: https://ibb.co/K0VCHwc

Best Regards.

Hi,

I deactivated the maintenance mode for you.
Thank you for your help.

Best,
JP

Hello,

I have tried visiting your website but the maintenance mode is still enabled. Please disable it to check it myself and help you out accordingly.

Screenshot for Clarification: https://ibb.co/0tRXWM0

Best Regards.

Hi,
I’m sorry the plugin had some issues.
It should be fine now.

Thank you for your help.

Best regards

Hello,

I have visited your website and this is not possible to hide the row that you set as sticky. Because if we try to hide it then it will be also hidden from the sticky header.

Regard’s.
Xtemos Studio.

Hello,

Is it then possible to only keep the header that’s not sticky and make it sticky but have it go from transparent background to black background when it shows in sticky mode?

Thank you

Hi,
I was able to have the top bar be transparent and then on scroll have a dark background (sticky) by adding this CSS:
.whb-color-light:not(.whb-with-bg) {
background-color: #040404;
}
I can’t seem to do the same thing for the main header.

does this help

thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

body .whb-sticked .whb-general-header {
background: black;
}

Best Regards.

[Author]

Posts