Media Query for Navbar (Technical Documentation)

Hi - I am having trouble using a media query for my ‘Technical Documentation’ project:

The navbar should move from the right to the top when the screen is less than 600px. I can’t figure out why that is not happening. Any help is appreciated!

You try this

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Thank you for responding! Just tried adding that to the head but nothing changed.

I’m are for it. I will help you. ;D

You see my fork? I here for help. ;D

Your media query is missing a closing }

Also the #navbar styles within the media query don’t override some of the larger view styles. The max-width is still applied and a few others.

Also watch out for the absolute positioning, your #main-doc is also still positioned on the small view and the nav will overlap it


Thank you for the help! I’ve applied all of your suggestions and the navbar is behaving according to my media query. My only issue now is that when i change “#navbar” within the media query to have “position: fixed;” the “main-doc” suddenly loses its position. It sticks to the top no matter what value i put for “top”.