I am having a fixed header to show and hide the header on scroll. The header itself contains an animated hamburger menu icon which triggers a modal window and should also serve as the modal close button.
Problem:
Due to the fact that the I am working with a fixed header, the hamburger close button is hidden underneath the modal. It also seems that this issue cannot be fixed applying a z-index to the header or the modal.
Is there a workaround to fix this or am I overlooking something? The challenge is that the hamburger menu icon is part of the header to make the header consistent in terms of design and responsiveness. Thank you!
I think it is possible in a dirty way.
Remove the icon from the header.
Create a DIV below the header and modal and set position op absolute and the z-index higher than the modal.
You could give it a try, if nobody else has a better solution
Please make sure your modal toggle icon (or its container) has a position applied and a minimum z-index of 1002.
The modal block has a default z-index of 1001, so you need to set it higher than that, and this property, in most cases, works only with an applied position (other than static).
This is the basic requirement for the modal toggle.
Of course, your header as a whole must be set up correctly, so no CSS property does interfere with the desired outcome.
But there is a problem, called stacking context, which is a thing since both header and modal have position: fixed; applied.
Even if you meet all requirements, there is a good chance that it still isn’t working.
Not sure if there is an easy solution, since I didn’t have a closer look.
But I assume that it isn’t achievable with only throwing some additional CSS rules inside.
The issue is that you want to display an inner/child element of a fixed positioned element in front of another fixed element (the modal).
You want to build your header with stacking context in mind.
In the current state, it won’t work, unless I miss something.
Edit:
I just checked your site and discovered you are using 2 individual icons anyway, which in addition fade in/out.
The most straight-forward approach would be to place the 2nd icon inside the modal and you would have the very same outcome.
So instead of a toggle, just create a trigger and a close icon.
Thanks for your help! I was able to achieve the desired effect by basically adding my header setup (hamburger icon only) to the modal. In the end it looks like as if its one and the same icon - even though there are two. I guess the additional code and elements won’t hurt…
