Nav Bar: Burguer Botton

1

Hello, Campers!
I’m working in my Personal Portfolio Web Page. I started by my navbar and I applied a Media Query to make responsive in small devices.
I’m stuck because the navbar works but it doesn´t in the way I want; the menu has to display vertically and just It doesn’t show in that Way. It becomes a bunchs of links without format.

I took this reference for my navbar: Reference: Burgerbuttom

Here’s my codepen with my code: My navbar with BurgerButtom

I appreciate any help
Thanks!

1 Like
2

Hi Leonardo.
I saw your code and here are few mistakes you did and I will try to explain how to notice them in the future.

First of all use 'Inspect" in debug mode or when you coding and if you point on the element and inspect - it will show you that exact element in the inspection mode.

So when you pressed the nav menu you were adding the additional class. And the class of the div element was looking like “Navbarresponsive” - as there are no such class - it provided default value.

I changed the JS script not to add the class, but basically apply different class.

So

 x.className = "responsive";

Fixed the first problem - applying the correct class.

Secondly, I had to make the class show the correct information.
I detected that .Navbar class was before the .responsive class in CSS media queries. I probably get your idea but classes do not work like that. There is no need to stack them.

 .responsive {
    display: flex;
   width: 30vw;
   margin: 2vw 5vw 0 auto; 
   flex-direction: column;
  
  }
.responsive a.icon {
    position: absolute;
    top: 2vw;
  right: 2vw;
  }
.responsive a {
    display: flex;
    text-decoration: none;
    color: black;
    
  }

I applied that.

You have to understand that the div element was block. I made it flex with flex-direction column, so all nested elements will be in column.

Then I made a width of the div and positioned it to the right side. I applied absolute position to the icon and small space. The button would be on top by itself without ‘Absolute’ position if you would make it the first element in your html in div with NavBar Id.

I also added basic style to the anchor elements so everything looked like this.

image
image1920×1080 288 KB

3

Hello @UATyroni:

I did a fast reading about your advices and after that I straight direct to the code: I followed your directions and all works ¡Perfectly! :smiley: :smiley:

Thanks for your time to answer and your Perfect explanation: This Would help me to 2 more projects. :smiley: :smiley:

Thanks!!! :+1: :+1:

1 Like
4

Happy coding :slight_smile: Was glad to help