Dawn - How can I keep The Header always Visible When Scrolling Down

[Ben1000]

Hi everyone,

I'm using the Dawn 2.0 theme.

I made my header sticky so when scrolling down/up the header always appears, for mobile and web.

I also have an announcement bar which is in the top of each page, and it disappears when I scrolling down.

The problem:

The problem is the first moment of scrolling a bit down from the top of the page, the header disappears and then pops up again. I want my header to remain fixed throughout the whole website.

How can I do it?

My website:

https://wortheattt.myshopify.com/

Another website where it works well:

https://www.mollie.com/en

Thanks

[ReturnPrime]

Hey @Ben1000    ,
Welcome to the Shopify community!
You can follow the instruction below:
please add this to your CSS file. 

#shopify-section-announcement-bar {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 99;
}
#shopify-section-header {
    position: fixed;
    top: 39px;
    right: 0px;
    left: 0px;
    z-index: 99;
}

If you feel like my answer is helpful, please Like and mark it as a solution. Let me know if you have any further questions.
Thank you!
Raman
Return Prime

[Ben1000]

Thanks @ReturnPrime, but it doesn't work properly. The announcement bar should disappear after scrolling down as it was before.

Thanks

[AlohaAkahai]

The comment above is correct but leave off #shopify-section-announcement-bar edit and it will disappear. However, it will leave a gap at the top. 

Also; Add width: 100%; to code. 

[Ben1000]

Hi @AlohaAkahai,

No, it's not.

It's a CSS code, which means there will be a space between the header to the *missing spot* where the announcement bar is located

[Ben1000]

Hi @AlohaAkahai,

There is a gap created when scrolling down because then the announcement bar disappear, which means the css code should be different or be located in different place in the base.css or adding a JS code.

Hoped that helped more to understand what I meant.

[Ben1000]

Anyone?

[AlohaAkahai]

@Ben1000 This question has been answered already. 

[Ben1000]

Hi @AlohaAkahai,

I tried politely to explain that your solution is not working. A CSS code is not enough to make it work because the announcement bar disappear after scrolling down (which is what I want) and then there is a visual gap. Therefore, there is a need for a JS code.

You can put the code on my website in your inspect and see it's not working, you are welcome to send a loom link to show me differently.

[AlohaAkahai]

Javascript won't solve this either. In fact, It won't do anything. Real Magic is done by CSS, Javascript just applies CSS code.   You can't have announcement bars with fixed position header without having the gap. It goes against CSS rules. 

[painnpill]

sorry but which css file do I add it to?

[diego_ezfy]

@Ben1000 

Have you taken a look at this guide yet? It approaches this issue with a simple fix but fairly well coded solution. Let me know if you need further assistance.

Kind regards,
Diego

[Ben1000]

Hi @diego_ezfy,

Thanks but with implementing this solution the problem still exists.

[diego_ezfy]

@Ben1000 

What exactly is the issue you're dealing with?

[Ben1000]

Hi @diego_ezfy,

The problem is the first moment of scrolling a bit down from the top of the page, the header disappears and then pops up again. I want my header to remain fixed throughout the whole website.

How can I do it?

My website:

https://wortheattt.myshopify.com/

Another website where it works well:

https://www.mollie.com/en

Thanks

[diego_ezfy]

@Ben1000 

I'm taking a look at the code, you're not using the code from the guide I shared a bit ago. That specific code should prevent that. Bear in mind that you ought to remove the one you're currently using to avoid conflicts.

Kind regards,
Diego

[Ben1000]

Hi @diego_ezfy,

Thanks, I tried implementing this solution again but it doesn't work.

[diego_ezfy]

@Ben1000 

What exactly does not work?

[Ben1000]

Hi @diego_ezfy,

As I explained in my post, first moment of scrolling a bit down from the top of the page, the header disappears and then pops up again. I want my header to remain fixed throughout the whole website.

My website:

https://wortheattt.myshopify.com/

Another website where it works well:

https://www.mollie.com/en

Thanks

[dmitry_z]

Hi @diego_ezfy , tried to implement the code provided I get this error: 

Liquid syntax error (line 1327): 'javascript' tag must not be nested inside other tags

 

[diego_ezfy]

Hi @dmitry_z ,

Thanks for the heads up, there was a typo in the tutorial's code. It should be all good now. 

Kind regards,
Diego