Responsive landing page using scss

Hello @wshena your work looks great on mobile here is a tip for creating small screen menus

Instead of changing the heigth from negative to positive values why not set the menu container to display:none

add a new class in the css and set it to display:block then use if/else statement to Target the menu and to toggle the menu

Like this

CSS
slider{
display:none
}
.slider.show{
display:block
}

JS
function openAndCloseNav(){	// 
mainNavbar.addEventListener('click', () => {
	slider.classList.toggle(show)
});
}

openAndCloseNav()

If you want nice animations you can use transform property to achieve that instead of display:none

Doing it this way reduces your code a bit and gives you the same result

I hope this helps