loopstudios-landing-page

Community feedback

• 

  madhaus•1,040

  @festsnusaPosted almost 2 years ago

  Hi there! I see that your whole page is not responsive, not only nav section. Here's my advice to how to add menu section:

  • add burger as image;
  • make your nav section flexible and add justify-content: space-between. So, logo on the left, burger on the right;
  • after burger, create ul with items "about", "careers", "events", "products", "support";
  • when you click on burger, the ul should cover all the page. Solution: via JS you can addEventListener when you click your burger and toggle active classes. For example:
  • header__burger_active - to transform your menu icon to close icon. scss code looks sth like this: &_active { position: fixed; right: 0; top: 1.4rem; padding-right: 1rem; content: url('./images/icon-close.svg'); z-index: 3; }
  • header__list_active - to make your ul cover all the page. scss code looks like this: &_active { display: block; position: fixed; padding: 10rem 3rem; top: 0; bottom: 0; right: 0; width: 100%; background-color: $black; z-index: 2; }
  • header__logo_active - to make logo appear with active ul: &_active { position: fixed; top: 1rem; }

  Hope you find my advice useful. Happy coding!

  Marked as helpful

  1

  ---

  

  Anurag Daliya•190

  @danurag1906Posted almost 2 years ago

  @festsnusa Hey! Thank You! Worked on your suggestion and got the output.

  0