Responsive Landing Page using CSS Grid

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Stiratto 👋

  Congratulations for completing this challenge!

  To remove the scroll when navigation bar is opened, we need to add some codes in JavaScript. We will make body unscrollable with overflow-y: hidden; when nav bar is opened, and revert it to scrollable state when nav bar is closed. Take a look at the edited code below.

  navbar.addEventListener("click", () => {
      document.getElementById("navBarUl").style.display = 'block';
      document.body.style.overflowY = 'hidden';
  })
  
  navbarClose.addEventListener("click", () => {
      document.getElementById("navBarUl").style.display = 'none';
      document.body.style.overflowY = 'auto';
  

  That will solve the problem. But, I see another problem. When the mobile nav bar is opened, we can actually scroll left and right, because the nav bar has width:100%;. To avoid this, please change in position: absolute; to position: fixed; in #navBarUl.

  Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  stiratto•160

  @StirattoPosted almost 2 years ago

  @amalkarim That's it, thank you!

  0