[Resolved] Menu hiding behind part of GP element

Hi there,

can i see that page ?

Oh no apologies needed, i didn’t even know it was friday lol

Try adding this CSS:

.main-navigation {
    position: relative;
}

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

Glad to be of help – and glad you could understand that – reading it back to myself left me dizzy lol