Stacking problem
Hi everyone, hope you're doing fine!
I probably have stacking problem. I'm trying to create a mobile menu which appears from the top and when it closes goes back to its original position (I'm translating it on Y axis)
The problem is that when it's closed, I can still see its background color (salmon). What I want to achieve is to completely hide the menu behind the header.
Here's the codepen: https://codepen.io/fracav99/pen/azdVJEE
Thanks in advance for your help! 🙂
8 Replies
ok I guess it's not a big deal, because reasoning about it, I don't need it to be visible on tablet/desktop version, so I can easily hide the mobile menu once I hit the tablet breakpoint.
I still leave the thread open 'cause I'm curious to hear from you before marking it as solved.
ok anyway the problem persist if I put a padding on the header element
you should hide that menu
with
display: none
that menu there is still accessible in the accessibility tree and it can still be navigated with some screenreaders and keyboard navigation (arrows and tabs)
and the problem you are having is because of the .content being smaller than the header parentto fix your problem, you have to remove the padding from the
header and set it on the .content
you're also adding a class with
-expand when you should be using aria attributesby the way, it works on desktop as well
by the way, remove the green background from the
header; or alternatively set .content's background to inheritAbout the aria, you're right, I did it like that because I just wanted to show the problem, but in the real project I'm working on I'm following the best practices for accessibility, of course! 😉
Thanks for point that out though
you're welcome