Landing Page -- position:fixed;

Tell us what’s happening:
I can’t figure out how to get the header/nav fixed at the top without breaking the rest of the page. I had it passing everything a few weeks ago and came back today to finish it, only to find I’m not passing everything anymore. I tried to find out how to fix this, and all I could find was that I need a position: fixed; somewhere in the header or one of its children (I thought I already had it there, but it seems I must have removed it). I don’t know where to put this without breaking the rest of it.

Also, I was having issues with getting everything to look right at different sizes with the media queries. And I need to align the footer and have been having issues with that, however those things aren’t really a main concern atm.

I appreciate another set of eyes on this. Thanks for looking.

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/89.0.4389.90 Safari/537.36.

Challenge: Build a Product Landing Page
Link to the challenge:

Setting the position to sticky would work better:

#header {
  position: sticky;
  z-index: 100;
  background: white;

The z-index makes sure the nav is on top of everything else.
You don’t need either the z-index or background. Those are optional, it just looks better with them.

Hope this works!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.