Product Landing Page Navbar

Product Landing Page Navbar
0.0 0

#1

Tell us what’s happening:

I’m getting an error message saying navbar should always be at the top of the viewport. I’ve been working different problems with this test page all day now I’m so close. Please take at look at my codes and see if you could help me please. I need a pair of fresh eyes.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36 OPR/53.0.2907.68.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page


#2

Hi Erica!

I think I figured out what’s going on.

You had your CSS for #nav-bar underneath a media call. When I moved it above the media call to the main section of your CSS, the FCC test recognized your #nav-bar declaration and passed all the tests.

This didn’t change anything about how your design appears on the page, but it made the code pass the test. And – i’ve heard – it’s best practice not to write main CSS underneath a media call anyway. :smiley:

I forked your codepen, so you can see exactly what I changed.

If that solved your question, you mark this topic as “answered” :innocent:

Congrats on finishing your Product Page! :clap:
-jan


#3

Thank you but I just tried your placement and then I even added the rest of my code to your location but it still is not working for me. Maybe it my browser/computer. Either way thanks for the tip, I will definitely save it in the new location. Also I will avoid putting main css underneath a media call.


#4

Ok, ok, I see what you did now it definitely works. My issue was both in the CSS and the Html. I had the nav-bar locked in the div and needed to move it out and above it. Thank you so very much for help I will definitely learn from that mistake.

Thanks again.:sweat_smile::smiley::smiley: