Hello, I need help with the sticky header on my store for mobile. I run a Venture theme. I tried this code
at the end of theme.scss:
.site-header__upper {
position: fixed;
z-index: 1000000;
top: 0;
background-color: #000000;
}
@media only screen and (max-width: 749px) {
header.site-header {
position: relative;
padding-top: 62px;
}
}
It worked overall but the close button “X” has disappeared. I attach a photo of how it is and how it should be. (how it should be - https://prnt.sc/26fnddl ) and (how it is right now - https://prnt.sc/26fne5t )
Hi @sangok420 ,
I checked and this is not possible with the current HTML code.
You can just change it like this:
If you want, you can add the following CSS code:
.js-drawer-open-left .drawer--left{
top: 60px !important;
}
.js-drawer-open-left .site-header{
transition: none !important;
transform: none !important;
z-index: 9999 !important;
}
Hope it helps!
Thank you it works on mobile but when I try the desktop version the header doubles. See picture - https://prnt.sc/26fqq2s
Hi @sangok420 ,
Sorry, you need to put everything in @media only screen and (max-width: 749px).
Refer
@media only screen and (max-width: 749px) {
.js-drawer-open-left .drawer--left{
top: 60px !important;
}
.js-drawer-open-left .site-header{
transition: none !important;
transform: none !important;
z-index: 9999 !important;
}
}
Hope it helps!
Could you give me the full code because I don’t really understand how to put those 2 codes together?
Hi @sangok420 ,
With your existing code then you just need to add the last code I sent it will work fine.
Hope it is clear to you.
Hi @sangok420 ,
I checked and it’s an error by your code. Please move this:
it needs to be in @media only screen and (max-width: 749px) same as header.site-header
Hope it is clear to you.
Thank you so much! It works now
1 Like
