Solved

Header not following on mobile when scrolling down

Jay_Olympus
Tourist
19 0 1

Hi,

 

What can I add in the code to make my header follow when scrolling down on mobile?

 

I'm using this templatemonster theme:
Body Builder - Sport Nutrition Shopify Theme (templatemonster.com)

 

My Shopify website:

https://www.olympus-training.shop

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4206 950 1599

This is an accepted solution.

Hi, so you can replace the code you added with this new one 

<style> 
@media screen and (max-width:767px) {
body{
overflow: visible !important;
}
header#shopify-section-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
    background: #fff;
}
}
</style>

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

Replies 6 (6)

PageFly-Richard
Shopify Partner
4206 950 1599

 

Hi @Jay_Olympus 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style> 
@media screen and (max-width:767px) {
header#shopify-section-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}
}
</style>

PageFlyRichard_0-1709094115280.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | 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.

Jay_Olympus
Tourist
19 0 1

Thanks, it almost solves it, but when I klick the burger menue, then it messes isn't on top of everything and after I close the burger menu the header doesn't follow anymore.

PageFly-Richard
Shopify Partner
4206 950 1599

This is an accepted solution.

Hi, so you can replace the code you added with this new one 

<style> 
@media screen and (max-width:767px) {
body{
overflow: visible !important;
}
header#shopify-section-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
    background: #fff;
}
}
</style>

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.

Jay_Olympus
Tourist
19 0 1

Awesome, that solved it. Thank you very much!

BSS-Commerce
Shopify Expert
3465 459 515

Hi @Jay_Olympus ,

You can follow these steps:

Sale Channel Online Store Theme > Edit code. Search theme.css file and add the CSS script at the end of the file: 

/* CSS for mobile version */
@media (max-width: 768px) {
    header #page_header .header-mobile {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-grey-1);
        z-index: 99;
    }
}

Save and reload the page.

Result:

view - 2024-02-29T092027.658.png

Hope it helps @Jay_Olympus 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Jay_Olympus
Tourist
19 0 1

Thank you very much! The header works like that, except that the announcement bar is now behind it 😛