Z-index conflict with form pop-up

I commented out
.shiftnav-wrap { z-index:250;}
in the plugin’s shiftnav.min.css and that seemed to fix it. This isn’t ideal because if the plugin gets an update, that can be overridden, but I could not override this setting in my own/custom CSS.

So if someone can offer up a better solution, or a way to override that I didn’t try (I did z-index: 0 !important and that didn’t work) I’d appreciate it!

Hi Amanda,

Yeah, you never want to edit the core plugin files. If necessary, you can always override CSS.

The issue you’re having is that your overlay background is outside of the wrapper, while the popup itself is inside the wrapper. So you need the overlay background to be both above and below, which of course isn’t possible.

I think your best solution is to just disable the “Shift Body” setting in the ShiftNav Control Panel – this will remove the wrapper altogether, so it should no longer be an issue.

To just override it with CSS, you would use

div.shiftnav-wrap{ z-index:auto; }

(You should almost never set z-index:0)

Hope that helps!

Chris

Hi I’m sorry for my delayed response. I didn’t want to disable Shift Body because that is a cool effect. ?? But div.shiftnav-wrap{ z-index:auto; } worked like a charm! Thank you so much for an awesome plugin and your timely help!

Glad to hear it’s working well for you now! ??