Dawn - keep the header visible when scrolling down

Store Design
1

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.

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

2

@Ben1000 ,

.image-with-text.image-with-text--no-overlap.page-width.isolate.section-template--14625265319989__16459638514e39b28f-padding {
    padding-top: 5em;
}
header.header.header--middle-left.page-width.header--has-menu {
    margin-top: 2%;
}
sticky-header.header-wrapper.color-background-2.gradient {
    position: fixed;
    top: 0;
    right: 0px;
    left: 0px;
    z-index: 99;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

Hi @oscprofessional ,

It doesn’t work well.

For example for mobile version, you can see it in this video after adding your code

https://www.loom.com/share/e2aefc02c17e4263a0433e58910abbef

This is my current status without the code (the announcement bar is fading after scrolling):

https://www.loom.com/share/2459d696bd584a4dbf0bc6af4cdeaa73

Thanks

4

@Ben1000 ,
@media screen and (max-width: 750px) {

.image-with-text.image-with-text–no-overlap.page-width.isolate.section-template–14625265319989__16459638514e39b28f-padding {
padding-top: 7em;
}
header.header.header–middle-left.page-width.header–has-menu {
margin-top: 9%;
}

}

Please add this code in base.css file too.

5

Hi @oscprofessional

It’s not working well, same reason.