[Resolved] How to set the z-index of the navigation as high as possible?

[Manuela]

Hi great peoples,

I’m just a designer and not a coder. I think I know what I need to solve my problem, but I do not know how to target and write the code.

Let me try to describe my problem. I’m working with GPP and Elementor Pro. I want to use a transparant navigation from GPP and a background via Elementor Pro, I will use that background full screen.
It took me a while to figure it out, but the section with the image is on top of the navigation instead of under… So I think I have to target the navigation and set the z-index as high as possible… or am I just not thinking straight.

So… can you help me out here?

Link to my testpage… https://playground.vermeeren.nl/home/
blue is the primary nav
yellow the secondary nav
and the image is in the background of a Elementor section

As you see I set a negative margin and the image goes over the navigation. Unfortunately I can’t set a negative z-index 🙂

Thank you!

Manuela

[Tom]

Hi there,

Give this a shot:

#secondary-navigation {
    position: relative;
    z-index: 99;
}

[Manuela]

That really helped a lot.
I also needed the primary above so I tried #primary-navigation aswell… well that did not work. But as soon I changed ‘secondary’ in ‘site’, it all fell together. Thank you.

#site-navigation {
position: relative;
z-index: 99;
}

[Tom]

Glad I could help 🙂

[Author]

Posts