Responsive navigation bar sizing issue

Newbie here working on my projects and I need a little direction. For my latest project I wanted to implement a cool toggle-able drop-down box that I seen in a video for my responsive navigation. With a little guidance I was able to set it up and it works great surprisingly. Here is my project for reference.

Can I make the drop-down use the full width of the viewport without building a new navigation bar?

I believe that the issue is because of the way that I used flexbox to create the navigation bar. The drop-down is inheriting the sizing of its parent (40vw) which is why it looks like it does.

Change positioning an sizing of .nav-ul on line 106:

  .nav-ul {
    display: none;
    left: 0; /* move it to left */
    position: absolute; /* position it according to the closest element with relative position
    width: 100vw; /* make it wide */
1 Like

Thanks for the guidance, setting the position property hadn’t crossed my mind. I also see that I can set the position to fixed with respective changes to the top and left properties to achieve a similar effect.

One thing that I noticed though is regardless of the position property(absolute, fixed) that there is a small margin on the left side of the drop-down. Resetting the margin/padding doesn’t seem to help, what is causing the small gap?

On lines 71-74:

    display: inline-block;
    margin: 0px 10px; /* <-- this */

You should override it in the respective media query

That’s the line that I suspected of causing the margin but I didn’t attempt to modify it because it should have also created a margin on the right, correct? Or was there a margin and it couldn’t be seen because the scrollbar has a higher priority? Sorry this is probably a stupid question.

Margin on the right is outside the viewport (just like a part of the element). It’s there, you just don’t see it.

I am a bit confused, if the width is set to 100vw for the element why would there be overflow? Is it because margins are not included in the width?

No, they are not. Docs on box-sizing.

So wouldn’t border-box make it so both margins are visible? From what I understood any borders/padding would be taken into account when the width is rendered.

So as I expected I put Overflow:hidden on the body and when the scrollbar is removed both margins can be seen.

Thank you so much for your assistance.