How can I make a sticky header always visible on the Dawn theme?

Store Design
1

Hello!

I am setting up a new theme - Dawn.

https://themes.shopify.com/themes/dawn/styles/default/preview?price%5B%5D=free&surface_inter_position=1&surface_intra_position=1&surface_type=all

I would like to make the sticky header always visible, as opposed to the current header which only shows upon scrolling up.

How would I accomplish this?

Thanks!

2

Yes please do. What do I need to change? Thank you

3

It seems like I need to chagne something in header.liquid but I want to be sure of what

4

@BoogieThreads

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store->Theme->Edit code

assets->base.css

.announcement-bar__message {

margin-bottom: -11px !important;

}

.header {

position: fixed !important;

top: 0px !important ;

background-color: #fff !important;

width: 100% !important;

}

Best regards,

PageFly

5

Thank you for your assistance. Unfortunately, that seemed to have broken the header in some way:

BoogieThreads_0-1663740268078.png
BoogieThreads_0-1663740268078.png1814×628 188 KB

6

@BoogieThreads can you send me the url of this site?

7

Yes of course it is www.boogiethreads.com

i am not using the Dawn theme right now though. I am working on it before launching

8

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

please try again with this code

Add this css at the bottom

Online Store->Theme->Edit code

assets->theme.scss.css

.site-header__upper {

padding-top: 31px !important;

position: fixed !important;

top: 0 !important;

z-index: 99 !important;

width: 100% !important;

background-color: #000 !important;

}

.sticky {

position: fixed !important;

top: 15% !important;

z-index: 99 !important;

width: 100% !important;

}

.sticky–active {

position: fixed;

top: 15% !important;

width: 100%;

-webkit-transform: none !important;

transform: none !important;

}

Best regards,

PageFly

9

I do not have a theme.scss.css but a base.css. I added it there and it does not seem that anything happened.

10

Hi @BoogieThreads

I can see you have changed the header, if you still want the header to always sitcky try this code and this time in the base.css file

Add this css at the bottom

Online Store->Theme->Edit code

assets->base.css

.header-wrapper {
position: fixed !important;
top: 0 !important;
width: 100% important;
}