Josh• 320
@Ao-chi
Posted
Hi Augustine!
Just some tips on the overlay. To solve this you can add another <div> element and give it a class of "overlay" or whatever name you'd like. Something like this:
<div class="overlay"></div>
and style it on css with this:
.overlay {
display: block
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(4, 2, 15, 0.6);
visibility: hidden;
opacity: 0;
z-index: 1;
}
.overlay.active {
visibility: visible;
opacity: 1;
}
You can toggle the active class with javascript every time you open the nav on mobile. Hope this makes sense and wish I could help! Happy coding~
Marked as helpful
0
Youssef Khalil• 40
@Youssef1khalil
Posted
@Ao-chi I made it with the box shadow but the way you wrote is good also
0
Josh• 320
@Ao-chi
Posted
@Youssef1khalil Nice! that's pretty neat way to do it too
0
