Shopify themes, liquid, logos, and UX
Hey guys wondering how can I implement a sticky header in the Shopify Dawn theme that remains visible above the cart drawer, even when the drawer is open? at the moment the cart drawer pulls out over the header logo, etc.
any help appreciated ! Cheers.
Solved! Go to the solution
This is an accepted solution.
Hi @dowloadingvirus,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.section-header.shopify-section-group-header-group {
z-index: 1001;
}
Hey there @dowloadingvirus I recommend that you watch this video https://m.youtube.com/watch?v=yT457Zx-fm0 and I think you’d be able to clear out the issues. Let me know if this works for you
Old vid mate, they have full sticky headers now it gets hidden by cart drawer tho 😕
Hi @dowloadingvirus,
Please send the website link, I will check it for you
This is an accepted solution.
Hi @dowloadingvirus,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.section-header.shopify-section-group-header-group {
z-index: 1001;
}
Amazing thank you mate.
Hi sorry do you have any idea on how to get the cart drawer remove button to show up over the header now , tried a couple things :
.section-header.shopify-section-group-header-group {
z-index: 1001;
}
.drawer__close {
position: absolute; /* Ensure it's positioned within cart-drawer */
top: 10px; /* Adjust as needed */
right: 10px; /* Adjust as needed */
z-index: 1003; /* Higher than the drawer and header */
background: black !important;
color: white !important;
padding: 10px;
border: none;
cursor: pointer;
}
Hi @dowloadingvirus,
I don't understand, which link are you referring to?
It's the close cart-drawer icon, trying to have that icon go over the header, atm the header blocking it so cant close cart.
If you need I can put the website back up.
Hi @dowloadingvirus,
Yes, please send me the preview link, I will check it
Hi @dowloadingvirus,
The close icon cannot be displayed on the header if the cart drawer is below the header, so you can try with following code:
.cart-drawer__warnings .drawer__close {
top: 50px;
}
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025