Navbar with absolute position is still fixed on top of the website

Tell us what’s happening:
So I have created a media query when, after the screen shrinks past 768px, the navbar is supposed to switch from the side of the screen to the top. The issue is, I don’t intend on still having the same fixed effect on my navbar with this query, which basically means I want to be able to scroll down without having the navbar constantly on the top of my screen.I set my main-text (id = main-doc) to a relative position, set my navbar (id = navbar) with an absolute position, and my links (id = links) with an inline-block position. Yet, the navbar is still fixed on the top of my screen, and I cannot scroll past the navbar, is there something that I’m missing?

Your code so far

Your browser information:

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

Hello there,

It is very difficult to debug a screenshot of someone else’s code.

Would you mind sharing a link to your project?

Would the website page link work?

That would be better. However, better still would be a CodePen/Repl.it/CodeSandbox or even GitHub repo link.

Here’s the GitHub page link:

Just to be sure, you ought to make sure the browser is not caching. Go to developer tools > Network > check the Disable cache checkbox.

You have to move the max-width media query below the styles it is supposed to overwrite.

Also, you didn’t set any position value on the #navbar in the media query. If you just want to reset it you can use position: unset (or use whatever value you intended to use).

The fact that the issue was bcoz of my code placement is still frustrating me. Thanks mate, I’ll remember this next time!