All things Shopify and commerce
<style> .overlaybutton video { width: 100%; height: 100%; display: block; margin: 0 auto; } .overlaybutton { position: relative; } .overlaybutton::after { top: 0%; left: 0%; position: absolute; background: rgba(255, 255, 255, 0.2); z-index: 5; content: ""; display: block; height: 100%; width: 100%; } .overlaybutton a.url { top: 38%; /* Adjust the top position for desktop */ left: 50%; position: absolute; font-size: 42px; /* Adjust font size for desktop as needed */ color: #ffffff; text-align: center; z-index: 10; font-family: 'Tiemann', sans-serif; /* Use Chivo font */ background: none; /* Remove background color */ padding: 0; /* Remove padding */ transform: translateX(-50%); /* Center horizontally */ } .overlaybutton a { top: 50%; left: 50%; position: absolute; padding: 20px 25px; font-size: 36px; color: #000000; background: #FFFFFF; line-height: 20px; text-transform: none; z-index: 9; text-decoration: none; transform: translate(-50%, -50%); font-family: 'Tiemann', sans-serif; /* Remove border-radius to make it squared */ border-radius: 0; /* Remove border-radius */ } /* Media query for mobile styles */ @media screen and (max-width: 767px) { .overlaybutton a.url { top: 10%; /* Adjust the top position for mobile to separate them more */ font-size: 24px; /* Adjust font size for mobile as needed */ } .overlaybutton a { top: 50%; /* Adjust the top position for mobile to separate them more */ left: 50%; position: absolute; padding: 15px 20px; /* Adjust padding for mobile as needed */ font-size: 18px; /* Adjust font size for mobile as needed */ transform: translateX(-50%); /* Center horizontally */ } } </style> <div class="overlaybutton"> <video muted="" autoplay="" playsinline="" loop=""> <source src="[.mp4 link”]"> <source src=“[.mp4 link”]> </video> <a class="url">OUR EXCLUSIVE SELECTION.</a> <a href=“[my shopify link]l”>Discover</a> </div>
Hey so I've added a custom liquid under my heading and when I click the sidebar menu on mobile mode the overlays in my custom liquid overlap the menu page. I can’t figure out how to make the overlays disappear. Is this something that I can edit in my custom liquid or something I have to edit in json?
Solved! Go to the solution
This is an accepted solution.
Hi Studdywear.
You can try to change z-index value of `.overlaybutton a` to solve the issue
Thanks for the reply, fortunately I just figured out the solution from my friend JonasS. Changing all the z-index values to 0 fixed the problem.
This is an accepted solution.
Hi Studdywear.
You can try to change z-index value of `.overlaybutton a` to solve the issue
Omg thank you! I had no idea of doing that, I changed all of them to 0 and it worked!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025