Sticky header enabled not working on mobile version?

EdisonCLS · ‎02-23-2024

Hi guys,

We are using Expanse theme, and we have enabled the "sticky header" option. However on the mobile version, the header is not sticky to the top. Could anyone help?

Site: www.canadianliquorstore.ca

PageFly-Henry · ‎02-24-2024

Hi @EdisonCLS

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

[data-section-type=header] {

position: fixed;

top: 2%;

z-index: 1;

width: 100%;

}

main#MainContent {

margin-top: 120px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

ZenoPageBuilder · ‎02-23-2024

Hello @EdisonCLS 👋

It is showing the sticky header for me

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

EdisonCLS · ‎02-23-2024

For the mobile version? It's showing the sticky header on the desktop, but
not on mobiles.

EdisonCLS · ‎02-23-2024

May I know which browser were you using? I tried on Safari and Chrome on iPhone, none of them was working tho.

ThePrimeWeb · ‎02-23-2024

Hey @EdisonCLS ,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.header-section {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

PageFly-Henry · ‎02-24-2024