Responsive web and mobile news homepage main challenge

The best way to approach this is to create an overlay with position fixed and size it so that it covers the whole screen and give it a black background color with an alpha value and set its display property to "none", then you can attach an event listener to toggle the overlay display property whenever you click the nav button.

also, don't forget to give the sidebar a z-index higher than the overlay

Hello! For the blurred background I suggest using box-shadow property on your .sideNav class using a black color with some transparency such as rgba(0, 0, 0, 0.5); for example.

hope this helps! :)