How to make the “Sticky Header” only work for DESKTOP

Hello team,

I’m having a problem with the header ” Sticky on Scroll” function

⭐ I’d like to have “Sticky on Scroll” header function Only Work for “Dekstop”

👉 However, when the option “Sticky on Scroll” option is selected on Desktop view, it automatically applies to the “Mobile view”

⭐ Screenshot: https://8upload.com/image/625d0545be5aa/sticky_header.png

Can you please let me know how to fix it?

Thanks very much!
Regards

Hello,

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

.whb-sticky-header {
display: none;
}

Best Regards

Hi, thank you for the quick reply.

⭐ I have enabled the “Make it sticky” option for the headers.
⭐ I have applied the code to the Mobile Custom CSS area

The header is still working “sticky” on the mobile view.

Please kindly advise,

Thank you very much

Hello,

Please replace the previous Custom CSS with the following then check back.

body .whb-sticked .whb-general-header {
    display: none;
}

Best Regards

It works! Thank you

One last quick question, how should I disable the “Sticker Top Bar” as well, on mobile view, please?

Thanks again

Hello,

Please replace the previous Custom CSS with the following then check back.

body .whb-sticked .whb-general-header, .whb-sticked .whb-top-bar {
display: none;
}

Best Regards

it works perfectly!

Many thanks!

Hello,

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts