news homepage

Community feedback

• 

  Obiora Emmanuel•350

  @Emmanuel-obiora

  Posted over 2 years ago

  Good day. For your toggle button you can create a function that reveals or hides the navigation using pre-defined CSS property. First you will need to change the flow of your nav menu to vertical and adjust it to the right using CSS. second set the display of the nav className to

  nav{
  display: none;
  }
  

  then create a class element within your style sheet, i.e

  .reveal-nav{
  display: flex; **depending on what you used**
  }
  

  Once the above is completed, you will move over to JavaScript. you can use the code as follow.

  const Navigation = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  
  show.classList.add('reveal-nav');
  }
  

  Then to hide the nav bar you use the reversal of what was written above

  const HideNav = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  
  show.classList.remove('reveal-nav');
  }
  

  Finally add the onClick={HideNav} as the case maybe to the elements performing the functions. once the above is implemented your code should be working fine. But you will also need to create a background modal. add a div tag to your code and give it an id, then add the following CSS properties

  .modal{
  display: block;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }
  

  However, you will need to call up the modal when showing and hiding the navigation bar. Just add the following to the functions above.

  const Navigation = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  const modal = document.getElementById('add-modal-id-here');
  
  show.classList.add('reveal-nav');
  modal.classList.add('modal');
  }
  

  And on close add the new lines.

  const HideNav = () => {
  const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
  const modal = document.getElementById('add-modal-id-here');
  
  show.classList.remove('reveal-nav');
  modal.classList.remove('modal');
  }
  

  This is a basic JavaScript function, I hope this helps in resolving your bug

  00