Hi I am trying to make a sticky header, so my cart and search options are always visable on my site.
I don’t have this option on my theme
Can anyone advise?
Topic summary
Goal: make the Shopify store’s header “sticky” (fixed so cart/search remain visible while scrolling).
-
Initial guidance: edit theme.liquid and insert a code snippet before the tag to lock the header. Exact code content isn’t shown in the thread.
-
Outcome: header became fixed, but the announcement bar and navigation were overlapped by product content on scroll, and the header wasn’t sticky on mobile. Screenshots illustrate the overlap and expected behavior.
-
Fix: adjust the CSS stacking order (z-index) from 1 to 99 to ensure the header sits above page content. This resolved the overlap, and the user confirmed improvement.
-
New issues: header shifted downward, cutting off top page content and breaking the floating menu; behavior still differed on mobile. Additional screenshots were provided.
-
Further actions: helper supplied a mobile-specific code snippet and another snippet to prevent slider images being cut off on both mobile and desktop. Exact code content isn’t visible in the thread.
-
Status: ongoing. Pending confirmation whether the mobile behavior, header position, and floating menu are fully fixed after the latest code changes. Images/screenshots are central to understanding the overlap and cut-off problems.
1 Like
Hi @TomDLondon ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
Thanks so much, this has helped
The header is now locked, but the announcement bar and Menu Navigation is being covered by some products when I scroll, see the the examples in the screenshots provided. Any ideas how to avoid this?
It also isn’t locked on the mobile version of the website
1 Like
Hi @TomDLondon , Pls change 1 → 99:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
1 Like
This is perfect
Thank you so much for the help
The only 2 issues I have now are
1: The head has moved lower, and is covering the top of the rest of my page and cutting off content. See attahced screenshots for reference
As well as the floating menu not working any more
- This doesn’t behave the same on the mobile version of the website, only the desktop
1 Like
@TomDLondon , This code fix part slider image cut off for mobile and desktop:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you