Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

Ben1000
Trailblazer
262 3 74

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

Replies 20 (20)

ReturnPrime
Shopify Partner
486 67 111

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
Trailblazer
262 3 74

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

 

Thanks

AlohaAkahai
Shopify Partner
68 3 26

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
Trailblazer
262 3 74

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
Trailblazer
262 3 74

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
Trailblazer
262 3 74

Anyone?

AlohaAkahai
Shopify Partner
68 3 26

@Ben1000 This question has been answered already. 

Ben1000
Trailblazer
262 3 74

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
Shopify Partner
68 3 26

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
Tourist
6 0 3

sorry but which css file do I add it to?Image 10-20-24 at 3.25 PM.jpeg

diego_ezfy
Shopify Partner
2970 571 917

@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
Trailblazer
262 3 74

Hi @diego_ezfy,

 

Thanks but with implementing this solution the problem still exists.

diego_ezfy
Shopify Partner
2970 571 917

@Ben1000 

What exactly is the issue you're dealing with?

Ben1000
Trailblazer
262 3 74

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
Shopify Partner
2970 571 917

@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
Trailblazer
262 3 74

Hi @diego_ezfy,

 

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

diego_ezfy
Shopify Partner
2970 571 917

@Ben1000 

What exactly does not work?

Ben1000
Trailblazer
262 3 74

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
Shopify Partner
68 0 7

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

 Hyj4hpx[1].png

 

- Dmitry
diego_ezfy
Shopify Partner
2970 571 917

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