A user encountered a z-index layering issue where the announcement bar appeared in front of the header when scrolling on both mobile and desktop versions of their Shopify store using the Stiletto theme.
Solutions Provided:
Three different approaches were offered to fix the layering problem:
theme.liquid file above the </body> tag to dynamically adjust z-index valuesz-index: 511 !important) targeting the header section through the theme customizer’s Custom CSS areatheme.liquid before the </head> tag to control header z-indexResolution:
The issue was successfully resolved. The user confirmed one of the solutions worked, though they didn’t specify which approach they implemented. All solutions included visual examples showing the corrected header layering.
Hey folks!
The announcement bar is in front of my header every time I scroll past it (both in mobile and desktop):
How can I place the header in front of the announcement bar?
My theme is Stiletto and my website is: https://vsa0oqnbhrloapy0-60150284501.shopifypreview.com
I would really appreciate some help
Hey @martujv
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @martujv
You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
#shopify-section-sections--24317362667859__header { z-index: 511 !important; }
It worked! Thank you!
