Archived topic
Menu hiding behind part of GP element
7 replies · Started by William on December 2, 2022
Hi there,
I noticed the drop down of the primary menu is disappearing behind a container in a GP - is there a way to correct this?

Kind regards,
Will
Hi there,
can i see that page ?
Ah sorry David, excuse my tiredness for a Friday! It's here.
Oh no apologies needed, i didn't even know it was friday lol
Try adding this CSS:
.main-navigation {
position: relative;
}
Thanks a lot David - I assume it's nothing to do with the z-index then?
Oh it is very much related to z-index
All parent level nodes within the body of the document have a default stacking context, including an element has a higher implied z-index then it descending siblings.
So the Primary Nav should always sit in front of the elements below it.
And any child node of that element, its stacking context and z-index is relative to its parent.
For example: a sub-menu inside the nav. Which means the sub-menu should never be able to sit behind another parent level descendent element.
Unless that child element ( sub-menu ) is absolute positioned, then it "can" get itself in places it shouldn't.
By setting the nav to position relative we force the sub-menus stacking context to be relative to the nav.
Which fixes that anomaly, and makes for a very tricky explanation to read lol
Gotcha, thanks for explaining it and helping!!
Glad to be of help - and glad you could understand that - reading it back to myself left me dizzy lol