landing page - grid - responsive

Community feedback

• 

  frontendcracker•100

  @arrKhange1Posted almost 2 years ago

  If it was question about how place your nav in the top right corner so that's it:

  Set a position:fixed and height:100% on your nav and then put in the top:0, right:0

  Now it will be sticked to your right side even if you scroll up and down

  0
• 

  frontendcracker•100

  @arrKhange1Posted almost 2 years ago

  Hi there! At first, we need a hidden nav. Of course, we already have a nav class with all its properties. So then we need to somehow hide it from the UI... Good, let's define a nav--hidden class with only display:none for simplicity in it and put it with nav together to get class="nav nav--hidden"

  Cool, we only see the burger icon in the top right corner now, but how to toggle this nav class?

  Right! Just get rid of nav--hidden in class="nav nav--hidden"

  Go to js file and define nav and burger elements so we can manipulate them

  Now just simply while we clicking on burger we need to change the state of our nav (assume it as turning on and off the boolean flag on the backstage)

  To do that in the burger event listener callback on click invoke nav.classList.toggle("nav--hidden")

  This construction stands for condition such as "If i see nav--hidden in classList, then i toggle it off, otherwise - toggle on. This way you can switch on/off your nav

  Yeah... this way you only toggle on your nav, but how to close it after?

  For this case, just simply add another close icon and do the same thing as before but inside the close icon event listener callback instead!

  Hope it was helpful advice. Happy coding!

  0