Liquid, JavaScript, themes, sales channels
i Tried to make my header and announcement bar sticky and now they are overlapping
store link: https://l1q8c769h9sesqel-57576685776.shopifypreview.com
any help ?
Solved! Go to the solution
This is an accepted solution.
Hey @Meitza
Thanks for getting back to me.
Here is the solution:
In file assets/theme.css
#shopify-section-header {
position: fixed;
z-index: 9;
width: 100%;
}
#PageContainer {
padding-top: 120px;
}
This is an accepted solution.
You have forgotten to add "width" element to your code.
#shopify-section-header
{ position: fixed;
z-index: 9;
width: 100%; }
This is an accepted solution.
Hey @Meitza
Thanks for getting back to me:
Change this code in theme.scss file, read carefully please.
There is some comments from our part.
.gd-free-shipping-bar {
background-color: #000000;
text-align: center;
width: 100%;
display: block;
padding: 15px 10px; - change to - padding: 10px;
margin: 0 auto 5px; - remove this line
}
.site-header {
position: fixed;
z-index: 500;
top: 50px; - change to - top: 40px;
}
.site-header__logo {
margin: 15px 0; - change to - margin: 10px 0;
}
Hope that helps you.
I try to fix it an now look like this
hello @Meitza
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-header{
position: fixed;
z-index: 500;
}
.site-header{
position: fixed;
z-index: 500;
top: 50px;
}
.main-content{
padding-top: 185px;
}
@media screen and (max-width: 769px){
.main-content{
padding-top: 129px;
}
}
This is an accepted solution.
Hey @Meitza
Thanks for getting back to me.
Here is the solution:
In file assets/theme.css
#shopify-section-header {
position: fixed;
z-index: 9;
width: 100%;
}
#PageContainer {
padding-top: 120px;
}
Now i have this issue
This is an accepted solution.
You have forgotten to add "width" element to your code.
#shopify-section-header
{ position: fixed;
z-index: 9;
width: 100%; }
Now header and announcement bar look to big how can i make it smaller ?
This is an accepted solution.
Hey @Meitza
Thanks for getting back to me:
Change this code in theme.scss file, read carefully please.
There is some comments from our part.
.gd-free-shipping-bar {
background-color: #000000;
text-align: center;
width: 100%;
display: block;
padding: 15px 10px; - change to - padding: 10px;
margin: 0 auto 5px; - remove this line
}
.site-header {
position: fixed;
z-index: 500;
top: 50px; - change to - top: 40px;
}
.site-header__logo {
margin: 15px 0; - change to - margin: 10px 0;
}
Hope that helps you.
Hi
have tried making the header fixed, working fine - but the drop down menus are also fixed, and not scrollable if they are longer than the viewport height. what would be a fix to allow for a sticky header but the menus are still scrollable?
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