A Shopify store owner implemented a custom video background section on their landing page, but encountered a z-index layering problem on mobile devices where the sidebar menu appears behind the video instead of overlaying it.
Proposed Solutions:
CSS Fix: Add z-index:0 !important; to the .videoBox class in the video section’s CSS file to lower the video’s stacking order
Theme Code Edit: Access the theme’s code editor (Online Store > Theme > Edit code), open the theme.liquid file, and insert specific markup before the </head> tag
The issue stems from improper z-index values in the custom video section, causing incorrect element layering. Both solutions aim to adjust the stacking context so the mobile sidebar displays above the background video. The store in question is oasiscoffee.store, and the custom section was created following a tutorial from ecomexperts.io.
Hey there, I recently added a custom section to my Shopify store so that I can have a video background on my landing page, everything works fine, except for when I go on mobile and try to open the side bar, it ends up not showing over the video but works fine everywhere else. Any ideas?
the site is oasiscoffee.store
I followed a tutorial for the custom section which is here (https://ecomexperts.io/blogs/liquid-tutorial-shopify/background-video)
Hello @MaxStovall ,
To fix this issue, you need to add the below-provided CSS code in your video section CSS file.
Find the code below.
.videoBox{
z-index:0 !important;
}
Hope this helps, let us know if we can be of any further help with your Shopify journey.
All the best,
CedCommerce
Hello @MaxStovall ,
It’s GemPages support team and glad to support you today.
I would like to give you the recommendation to support you so kindly follow the steps below:
Open your theme.liquid theme file
Paste the below code before
For example,
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
