Header overlay runs over the navigation

Elements
1

i have a problem with my overlay in the header, which seems to run over the navigation bar.

i have created an overlay for my header that only covers 50% of the header.
however, this runs above the navigation, which of course makes no sense.

→ here is a video to visualize the problem

→ here the project

thanks for any help and hints

2

I have just downloaded your project.

Change the Z-index value of your Sticky Menu from 1 to 40.
That should hopefully fix it. :slightly_smiling_face:

1 Like
3

thx … interesting. i was already on the right track. i started with 5, 10, 15, 20, 25, 30 … then i stopped trying to fix it with z-index.

1 Like
4

You can also switch “isolate” on in the Layout options to fix this issue, like this…

Hey @elementsbot can you explain what “isolate” does in Tailwind CSS?

EDIT: Seeing as the bot is still misbehaving, I’ll add some context myself.

–

It creates a new stacking context, which means the element and its children are rendered independently of elements outside of it when it comes to stacking (like z-index).

Normally, z-index only works in relation to a stacking context. If you’re having trouble with elements not layering the way you expect (e.g. z-50 not appearing above another element), it might be because they’re not in separate stacking contexts.

Using isolate ensures that the current element becomes a new stacking root, so its z-index will behave independently.

  • isolation: auto is the default (no new stacking context).
  • You usually only need isolate when dealing with overlapping elements or layout bugs involving z-index.
1 Like
5

this is of course so much easier than searching for the right z-index. thanks!

6

@dan

the header-overlay drives me crazy. i have created a sticky menu and use the “isolate” on in the layout. but it doesn’t work. what am i doing wrong?

link to the project

thx for any help and feedback.

7

@Pegasus
do you mean why the contents is on top of the menu when you scroll

8

yes. ;-/

9

I think it’s because you have “Isolate” on the Container wrapping the Sticky Menu. I switched Isolate off on the Container and it seems to work now.

10

I turned off all the z index’s in your your project

I then just set the z index to 31 on the container holding the menu, set menu to custom and 31

you can over do z index’s

11

I should have shown the menu being set to custom 31

leaving all those z index’s could confuse if you add more

I would turn off all z indexes you do not need

12

thank you! i hope i got it.

13

my settings dont work in browser only in Elements

14

the video from dan has helped.

thank you also for your support .-)

1 Like
15

@Pegasus

I created this, 2 stickies joined 100% tranparent

only set z indexes on the sticky parts, just helps with adding to webpage later on

just a thought for keep it minimum

1 Like