Header not following on mobile when scrolling down

[Jay_Olympus]

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

[PageFly-Richard]

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>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[Jay_Olympus]

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 · 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>

[Jay_Olympus]

Awesome, that solved it. Thank you very much!

[BSS-Commerce]

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:

Hope it helps @Jay_Olympus 

[Jay_Olympus]

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