How can i put Static header in dawn theme?

Store Design
1

Please how could I leave the static header in dawn theme?

I would need to know what code and where i would have to change it.

When i scroll down in the website I want to leave the static header all time.

Thank you so much

2

hii, @unrosa
Kindly share your store URL so,
I can solve your problem.
Thank You.

1 Like
3

Thank you so much!!!

4

hii, @unrosa
Paste this code on top of the base.CSS file.

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
}

Thank You.

3 Likes
5

Thank you so much!!! It worked

1 Like
6

@unrosa
Welcome.

7

Hello @Zworthkey ,

For the fixed header, how do you do when the announcement bar is active?

Thank you

8

Now it is not working, could someone help me? thank u

9

Please it didnt work, could you help me once again??

10
11

First I fixed the announcement in place using ops code, do control-f ‘announcement’ and its the first one

/* section-announcement-bar */
#shopify-section-announcement-bar {
    z-index: 4;
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;

}

Then I added margin for the bottom code that the op provided as it was overlapping

sticky-header.header-wrapper.color-background-1.gradient.header-wrapper--border-bottom {
    position: fixed !important;
    margin-top: 15px !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;

}

Youll probably have to change the margin for each site.

12

Don’t go with CSS. If you are go with css, you get some spacing issue in header while usign top bar.

The sticky header will be hide while we scroll down. While we scroll down there is 2 classes added in “shopify-section-header” this ID.

Check below steps to resolve this.

Step 1: Goto header.liquid file

Step 2: Goto line number 698

this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);

replace this code with below code

this.header.classList.add(‘shopify-section-header-sticky’);

Step 3: Goto line number 709

this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);

Replace above code with below code

this.header.classList.remove(‘shopify-section-header-sticky’, ‘animate’);

13

Did you ever get a solution for this? I may have a solution soon since I am owkring on the same thing.