Build a Technical Documentation Page - Media queries

Hi guys, need your help.

I finished off the Tech Documentation Page but I am not quite happy yet for two reasons:

  1. The media query I wrote does not work as I wanted. The idea was to make the navbar disappear when the browser page was smaller than 900px width. At the moment nothing happens.

  2. I noticed also that the navbar when the screen height is smaller and it does not contain the full list of items does not allow to scroll. I tried to add the “overflow: scroll;” CSS command but it looks horrible as it stays there even when it is not needed (you cannot actually see it when using CodePen as the top bar is big and it reduces the space available for the browser but if you run the code on Chrome without CodePen you can see what I mean). I would like to write a second media query to make sure that the scroll bar only appears when it is needed.

Any idea on how I can change my code to make both happen?

I actually passed the test (16/16) already but I would like to make those two adjustments to improve responsiveness.

Link to CodePen:

Thanks in advance.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:

  1. Move the media query below the styles you want it to affect. You can just move it to the bottom of the CSS.

  2. Did you try using overflow: auto; for the scroll?

Thanks lasjorg - it actually works perfectly now. I will keep the media query position in mind next time I will need to use it.