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

2 Likes

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”.