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.
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!
(To avoid confusion, I didn’t want to hijack similar threads, because it seems that my setup is slightly different.)
I had the same issue.
You can set a margin on the modal with the height of the header.
Your header will be visible dow.
Thanks, but I don’t want the header to be visible - only the hamburger menu icon which is part of the header.
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.
I recommend to have a look at this post, which might clear things a bit up for you:
Why is z-index not working?! - Explaining CSS Stacking Context
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.
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…