Technical Documentation Page: Responsive navbar disappearing

[aRViGee]

Hi all,

I’m a starting developer and currently I’m going through the Responsive Webdesign Projects course.

My latest finished project, the Technical Documentation Page was working fine a couple of days ago. But now, even though I haven’t changed anything in between, the navbar completely disappears when I scale the window down to <950px (my @media rule).
The navbar should go to the top of the screen.

The link to project is:
https://codepen.io/arvigee/pen/vYXMzNO

I hope someone can help me to fix this, and explain to me why it isn’t working properly.

Thanks!

aRViGee

[Sky020]

Welcome, aRViGee.

It is probably the fact that this is changing the ul elements, and not the nav:

@media screen and (max-width: 950px) {
  nav ul {

So, if you move the ul elements to be absolute positioned, then the nav has no reference to size to, and becomes size 0x0. This means any element within nav told to be width: 100%;, becomes 100% of 0.

Hope this helps

[aRViGee]

Thanks for the help Sky020!

It brought me on the right path of fixing this.

Cheers!