How can I fix the z-index issue with sticky navigation and a popup?

30 0 9



I have a problem that I want to explain in a simplified manner.


Say we have two elements, both in the same hierarchy. each of them gets a position fixed at a certain point.


Parent 1 has many children  2 are my concern, Lets call them Child A and Child B.


Parent 1 : Wrapper of sticky nav for the website, fixed the moment you scroll

Child A: the sticky Nav .

Child B: Drawer cart

Parent 2: a popup notification from an APP


I want parent 2 to be above Child A, and below Child B.


Parent 1 must have high Z-index since its the navigation that sticks on scroll.


Can I have it that the order is ( Child A < Parent 2 < Child B )



To my understanding , to make parent 2 show up above Child A, it has to have higher z-index, however, if parent 1 has less z-index than parent 2, then parent 2 stays above child A & B. no matter what thier z-index are.


The code is long and I would post it if there is a possibility for a solution to this 

Reply 1 (1)

Shopify Partner
36855 3637 11981


oh sorry any issue if possible to share issue image and store url

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