Navigation menu stuck inside header.

Question

I was creating a navigation menu.
But when I press the hamburger menu icon, it appears inside the header.
How can I fix it.
I want to show it on the left side.
Code link:
https://code.sololearn.com/WUg1B45saPxi/?ref=app

Answer 1

these lines are responsible for displaying it in a row:

display: flex;
flex-direction: row;

use flex-direction: column to make them be in a column.

you could also try
.header {
position: relative;
}
.nav {
position: absolute;
left: 0;
bottom: -100%;
}

Answer 2

do you mean something like this? top: 100% was better than bottom: -100%, my bad.

https://code.sololearn.com/W6zBEolQ45Ke/?ref=app

Answer 3

John Doe it's not working with me, can you send the working code..

Answer 4

Yes, now a little bit more modification.
If user clicks outside the navigation container, the nav should hide. And disable scrolling down the page when the menu is open.

Thank you..☺️