loopstudios-landing-page

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!