Hi,
I wanted to make my header sticky for the mobile version and thus used a code that I saw in one of the thread. However, after making the header sticky, the announcement bar is getting messed up and also the announcement bar is also becoming sticky. I want only the header to be sticky and not the announcement bar just as can be seen in my other website: sohumlinen.com
Can someone please help me achieve the same thing in my new store too: sohumretail.myshopify.com (Pass- Sohum@10)
Any help is highly appreciated.
Thanks!
Hi, @ChamanGarg
Padte this code in theme.scss.liquid file.
@media screen and (max-width: 425px) {
header.site-header {
position:fixed;
}
.is-moved-by-drawer{
position: relative;
top: 93px;
}
}
Thank You!
1 Like
Hi @Zworthkey ,
I added the code but the announcement bar is now stuck below the header. Can you please check!
Thanks
I can’t understand your problem can you give me screenshot,
Of this problem.
Thank You!
Hi I have attached a photo and screen recording highlighting the issue:
I actually wanted in top of the header.
To be precise I was exactly wanting it the way it is in sohumlinen.com website:
As you can see, the announcement bar is on top of the header and when someone scrolls down, the announcement bar disappears and only the header becomes sticky!