How to avoid animated hamburger Menu hidden under modal?

General
1

Just trying to fix that via z-index of the respective divs displaying the hamburger. But the modal is overlaying it no matter what the z-index is. The reason I want to accomplish that, is that in case of the animated Hamburger (from the design library) it transforms nicely to a close button on click, and I want to keep that close button visible above the modal (which I need to cover 100% of the screen), and I want to avoid to define a different close button in a different place within the modal for UX reasons.

Is that any way possible?

2

Applying a position to your element should do the trick, if z-index is set accordingly.

1 Like
3

does not in my case, settings:

Bildschirm­foto 2023-03-05 um 22.17.42
Bildschirm­foto 2023-03-05 um 22.17.421954×1174 145 KB

Experimenting with different position settings does not help either

4

Is the hamburger div inside a fixed parent?

If so, position:fixed creates a new stacking context, thus it’s the fixed parent that will have to have a higher z-index than the modal.
You might want to review the nesting of your hamburger element in this case.

1 Like
5

seems not to be nested in a fixed positioned element, structure is as follows:

Bildschirm­foto 2023-03-06 um 10.52.41
Bildschirm­foto 2023-03-06 um 10.52.41698×1636 45 KB

6

Can you share a link or your section block via file?
I’ll be happy to take a quick look.

7

would be a temporary login link be ok? Could send that via messages here

8

Checking things on front-end is sufficient, so a normal like would do :+1:

9

Thanks for your recommendation, but did not help, even setting the overall header section’s z-index to a value above that one of the modal, does still put the modal above. Must something inherent with a modal functionality in general to prevent what I intended to do

10

The z-index of your <header> section needs to be 1002 at least.
Is this the case?

1 Like