Navigation Bar and Media Query issue

Doing the Landing page challenge - the issue i’m running into is that i have a media query in the Video ID but for some reason it fails the test

The other issue being i’m not able to freeze the logo and the nav-bar together.

PS: Super new to coding - i’ve got no background in coding so any help will be appreciated.

Here is my code: https://codepen.io/anon/pen/XoevbB

What are you trying to set with the media query in video? Looks like you have a height there, but media queries are for adjusting content based on a a media query set to a min or max width of the browser page. Hope that kind of gives you a tip off of whats wrong there… Heres some info on what media query is and how to use it that may help you out: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

You have your #header-img and #navbar wrapped in #header, but you put your fixed positioning on #navbar, which means its is the only thing that will remain fixed and everything else will scroll normally. Instead, you want fixed positioning to be on #header

karansingh1172,
I am giving you a hint about your problem. Try if you can find the problem.

The test case says- The navbar should always be at the top of the viewport.
So are you keeping at Top?

And for the second you haven’t specified any element’s css in media query.
You can read about media query from cndragn’s link

Thank You so much! I read up on it and made a query based on that!

Shofol1,

I tried to position my header but still to no avail. Can you please go in detail?

The test said- Navbar navbar should always be at the top, not header. Make the Navbar to fixed and top, not the header.

Glad to help! I notice the navbar test passes now… setting the header to fixed instead of navbar did the trick even though the test says it requires it to be navbar. No idea what is up with that, might be something to do with how the test is written. But, its working now and your header doesnt scroll, which is the goal.

Make sure to update when you’ve fixed the media queries…you’ll get it :smiley:

btw, if you want to structure your html for the test to make more sense, you could rename header to navbar, rename navbar to nav, and then update your css accordingly. But to be honest, logically, I would have named it header too, and the test for that passes now, so I don’t think its anything to worry about.

Thank You so much! Your suggestion took care of it!

Thank You so much! Finally got my media query figured out as well and passed all tests!

You are welcome. Best of luck with your journey.

1 Like

Awesome!!! Thank you for updating! Btw, just noticed your “About Me” :rofl::joy: Don’t worry, it gets easier…I promise!!!

ha ha ha - thank you! Your guidance has been amazing! I hope I keep learning like this

1 Like