Responsive landing page using scss

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  Hello @wshena your work looks great on mobile here is a tip for creating small screen menus

  Instead of changing the heigth from negative to positive values why not set the menu container to display:none

  add a new class in the css and set it to display:block then use if/else statement to Target the menu and to toggle the menu

  Like this

  CSS
  slider{
  display:none
  }
  .slider.show{
  display:block
  }
  
  JS
  function openAndCloseNav(){	// 
  mainNavbar.addEventListener('click', () => {
  	slider.classList.toggle(show)
  });
  }
  
  openAndCloseNav()
  
  

  If you want nice animations you can use transform property to achieve that instead of display:none

  Doing it this way reduces your code a bit and gives you the same result

  I hope this helps

  Marked as helpful

  0

  ---

  

  Shena•150

  @wshenaPosted about 2 years ago

  @SatellitePeace Hi, thanks for your advice. I will definitely try to implement it in the next challenge. Thank you

  1