Responsive navigation bar sizing issue

HTML-CSS
1

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.

2

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
3

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?

4

On lines 71-74:

.nav-li{
    display: inline-block;
    margin: 0px 10px; /* <-- this */
}

You should override it in the respective media query

5

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.

6

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

7

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?

8

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

9

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.