Hi,
I want to make the header sticky for the mobile site of our shop.
I added this code that I found in another thread to the end of the theme.scss.liquid:
@media only screen and (max-width: 729px){
#NotificationPromo {
position: fixed !important;
top: 0;
}
.site-header{
position: fixed !important;
top: 40px !important ;
}
}
Unfortunatley, nothing happens. Can someone help me?
This is PageFly - Advanced Page Builder. I would love to give you some recommendations
-Go to Online Store->Theme->Edit code
-Asset-> theme.scss paste the below code at the top of the file.
@media (max-width:767px){
#shopify-section-header{
position: sticky !important;
top: 0;
z-index: 99999;
}
}
Best Regards;
PageFly
Hi Pagefly,
thanks for your reply. The header is sticky now, but it is moved down a little bit.
Do you have an idea how to move it to the top?
Also, the rest of the page should start below the header, not behind it.
Thanks for you help!
you can add code again and I will check it now
@media (max-width:767px){
#shopify-section-header{
position: sticky !important;
top: 0 !important;
z-index: 99999;
}
}
Hi,
it still does not work 
here is the preview link: https://baechlein.de/?_ab=0&_fd=0&_sc=1
you can try add to before element of theme.liquid file
@media (max-width:767px){ #shopify-section-header{ position: sticky !important; top: 0 !important; z-index: 99999; } }Hey, your second solution worked, I just had to remove some old code from the theme.scss.
So I made it work with the code in the theme.scss now!
There is only one Problem left:
When you scroll down and open the menu, the “x” to close the menu does not appear. See attached pictures.
