Solved

How can i put Static header in dawn theme?

unrosa
Tourist
13 0 5

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

 

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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.

View solution in original post

Replies 12 (12)

Zworthkey
Shopify Partner
5581 642 1565

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

unrosa
Tourist
13 0 5

Thank you so much!!!!

 

unpradorosa.com

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

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.

unrosa
Tourist
13 0 5

Thank you so much!!! It worked

Zworthkey
Shopify Partner
5581 642 1565

@unrosa 
Welcome.

King-Kang
Trailblazer
148 8 76

Hello @Zworthkey ,

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

Thank you

DavidB1
Shopify Partner
6 0 1

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. 

unrosa
Tourist
13 0 5

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

unrosa
Tourist
13 0 5

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

unrosa
Tourist
13 0 5

unpradorosa.com

cvworld
Visitor
2 0 0

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');

BeTheWater
Shopify Partner
2 0 0

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