How can I make my menu remain visible while scrolling?

Store Design
, , , ,

Topic summary

A user seeks to implement a sticky header menu that remains visible during scrolling on both mobile and desktop versions of their Shopify store (Dawn theme).

Proposed Solution:

  • Add CSS code to the theme’s base.css file:
    .header-wrapper {
  position: fixed;
  width: 100%;
}

Current Issue:

  • The solution partially works but creates an undesirable delay effect when scrolling up (demonstrated via screenshot).
  • The user is seeking an improved solution to eliminate this scrolling delay while maintaining the sticky header functionality.

Status: Unresolved - awaiting further technical guidance to fix the delay issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Good morning,

I would like my menu to remain visible even when I scroll down, on mobile and on computer. Do you know what I can do?

Theme: Dawn
Website: jadis-shop.com

password : rj

thanks in advance

2

Hello @JADIS

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header-wrapper {
    position: fixed;
    width: 100%;
}
3

It works not perfectly unfortunately when I scroll up it causes this delay (see screenshot)

sdqsdq.PNG
sdqsdq.PNG1897×823 207 KB

Do you have a solution please ?