Header not following on mobile when scrolling down

Store Design
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

2

Hi @Jay_Olympus

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

PageFlyRichard_0-1709094115280.png
PageFlyRichard_0-1709094115280.png654×1416 186 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

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.

4

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
view - 2024-02-29T092027.658.png668×930 195 KB

Hope it helps @Jay_Olympus

5

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

6

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

Awesome, that solved it. Thank you very much!