How can I fix the header issue in Dawn theme?

Store Design
, ,
1

Hello,

Site link: My shopify site

I am attempting to make it so that my header (with the announcement bar and the moving bar below) stays in a fixed position, so that when someone scrolls, the header will always be there. Also, the sticky header option in the shopify editor doesn’t work either.

I can’t seem to figure it out (been messing with a lot of CSS and have not found a solution).

Thanks for your time in advance!

2

Hi @styleshop27 , you can solve the issue by adding following this instructions

Go to your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css

Add this code at the bottom and save your base.css file

#shopify-section-header,
#shopify-section-announcement-bar {
position: sticky;
}
#shopify-section-announcement-bar{
top: 0px; 
}
#shopify-section-header {
top: 38px;
}
@media only screen and (max-width: 600px) {
#shopify-section-header {
top: 52px !important;
}
}
1 Like
3

Hi @RamenGlow,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

#shopify-section-header{
position: sticky !important;
top: 0 !important;
}

PageFlyVictor_0-1680146658877.png
PageFlyVictor_0-1680146658877.png3218×1332 484 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

1 Like
4

Hello @styleshop27 ,

You can try to do this:

Go to Online Store → Theme → Actions → Edit code

Ref- step 1.png
Ref- step 1.png1434×819 104 KB

Go to Assets → base.css → add the following code at the bottom

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

Save and preview.

Hope this can help.

Ali Reviews team.

1 Like