Site logo

Archived topic

Menu hiding behind part of GP element

7 replies · Started by William on December 2, 2022

Viewing posts 1–8 of 8

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

This archived topic is closed to new replies.