How to create a sticky header that works across all devices?

Store Design

Topic summary

A user seeks guidance on implementing a sticky header that remains fixed at the top during scrolling while maintaining responsiveness across mobile and desktop devices.

Proposed Solution:

  • One participant suggests using CSS media queries with position: sticky !important applied to .site-header
  • The code targets both mobile (max-width: 768px) and desktop (min-width: 769px) breakpoints

Current Status:

  • Another community member requests the website URL to provide more specific assistance
  • The discussion remains open, awaiting further details to offer tailored implementation advice
  • No final resolution or testing results have been shared yet
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I want it to remain fixed at the top of the page as users scroll, without affecting the layout or responsiveness on mobile and desktop (More Information). Any tips on implementing this using CSS or Liquid?

2 
@media (max-width: 768px){
    .site-header {
       position: sticky !important;
}
}

@media (min-width: 769px){
 .site-header {
       position: sticky !important;
}
}
3

Hi @jameschris21 ,

Please send the website link, I will check it for you