Why isn't my second modal covering all elements despite high z-index?

[Valery_Nguyen]

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!

[KetanKumar]

@Valery_Nguyen

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

[LitExtension]

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.

[Valery_Nguyen]

@LitExtension

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