Help with menu Overlay problem
Hi, ya'll o/ Please help me with this problem.
So, on mobile, when you click on the hamburger buttom, the overlay should show up. I'm trying to do this through a css rule.
Basically when the .header__menu receives the .open class the overlay get visibility: visible.
I'm probable doing something wrong with this css rule, but can't understand where is the mistake u.u
codepen -> https://codepen.io/rwxganta/pen/MWZPEYK ❤️
3 Replies
The problem is there is many
js__btn-menu class, when you use querySelector it matches the first div with .js__btn-menu class, and based on the CSS you provided, the .header__menu.open .overlay selector is looking for an element with the class overlay that is a descendant of an element with both the classes header__menu and open. However, in your HTML structure, the overlay element is a sibling of the header__menu element, not a descendant.@Luka I have added a new class called
overlayWrapper, which is unique to this div, so query selectory has no problem finding this exact div. and use that class overlayWrapper for querySelector and finally ~ CSS selector will target the .overlay element that is a sibling of an element with the classes header__menu and open. With this change, the overlay should become visible when the button is clicked.
ohh my, what a silly error. TY so much @Jus Sus || 💀 for the time and attention o7