Z-index Not Working - Help!

25 0 7

Hi there,

I've implemented 2 modals on my site.  The first modal,  I did a contact button on the Nav bar, which is working perfectly. The modal covers everything and you cannot click on the nav bar.  This is exactly what I want.

Then my second modal is what I'm having trouble with.  It's on my cart page where the user click to view a modal of information. However, with this modal open, can still hover and click on all elements on the nav bar.  I did set it with a very high z-index just like the first modal...but it's not working. Can anyone help?

Below are screenshots of both modal (one working properly and the other isn't working).  If you want to see the site, the non-working modal is here on the cart page if you click on the "time" right above the check out button (https://shopbarkrangers.com/cart)

Thank you so much! 


Screen Shot 2021-04-23 at 3.49.23 PM.pngScreen Shot 2021-04-23 at 3.51.04 PM.png

Shopify Partner
18896 1984 6992


It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Shopify Partner
920 107 160

Hi @Valery_Nguyen

Please place this code at the end of the "theme.scss" to solve your problem.

.template-cart .page-container {

    z-index: 15;


Screenshot to refer: https://prnt.sc/11y8oo4

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
25 0 7


Thank you! I've tried that before, but then the nav-bar doesn't work after the modal is closed.