Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
hii, @unrosa
Kindly share your store URL so,
I can solve your problem.
Thank You.
Thank you so much!!!!
unpradorosa.com
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.
Thank you so much!!! It worked
Hello @Zworthkey ,
For the fixed header, how do you do when the announcement bar is active?
Thank you
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.
Now it is not working, could someone help me? thank u
Please it didnt work, could you help me once again??
unpradorosa.com
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');
Did you ever get a solution for this? I may have a solution soon since I am owkring on the same thing.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024