News Homepage using Grid and Javascript

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!!