Header issue on mobile

Store Design
, , , , , , , , , , , ,

Topic summary

A mobile header scrolling issue was reported where the header moves across the entire store instead of remaining fixed in place.

Initial Solution Proposed:

  • Remove specific CSS code from the base.css file targeting mobile devices (max-width: 768px)
  • The code in question: body {overflow: auto!important;}

Current Status:

  • The proposed solution cannot be implemented because removing that CSS code causes a separate footer issue
  • The problem remains unresolved and requires an alternative fix that addresses the header scrolling without breaking the footer functionality
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, when I open the header on mobile and start “scrolling,” it scrolls all the way across the store.

How can I fix this? I want the header to be fixed in place and not scroll, without any bugs.

Here’s my store URL: https://1049xn-ya.myshopify.com/

I only need this for mobile

Thank you,
Tim

2

Hi @CreatorTim

You can solve it by removing this code in your base.css file

@media screen and (max-width: 768px) {
body {overflow: auto!important;}
}
1 Like
3

Thank you!

4

Hey, I just realized that I can’t remove that code. It fixes an issue with the footer.