@TalasaDev
Submitted
Hello everyone, I just finished this project.
I had a really hard time figuring out how to create the darkening effect in the site when the hamburger menu is open. I tried creating a <div class="shadow"> and then:
-
place in the after the <main> as <div class="shadow"></div> and give through CSS size, position, background-color, and then apply a blend-mode with multiply and transparency. I wanted to place over the main container another empty container of same size with only a transparent dark color that would display only when clicking the '.openMenu'. It didn't work and I sensed like my own computer was judging me. It was wear.
-
the second option I tried was, in mobile display, to add a second column in the '.navbar' element and style it with a dark color and transparency.
<logo>
<div>
**// right here I place the <div class="shadow></div>**
<ul class="navbar">
<li>Home</li>
<li>New</li>
<li>Popular</li>
<li>Trending</li>
<li>Categories</li>
</ul>
</div>
<burger-menu>
</nav>```
Could somebody provide any orientation on how to get that effect?
Thank you,
happy codding!!
