Responsive site using mobile first approach

Community feedback

• 

  Josh•320

  @Ao-chiPosted almost 2 years ago

  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

  @Youssef1khalilPosted almost 2 years ago

  @Ao-chi I made it with the box shadow but the way you wrote is good also

  0

  

  Josh•320

  @Ao-chiPosted almost 2 years ago

  @Youssef1khalil Nice! that's pretty neat way to do it too

  0