Problem with static header in Product Landing Page

Code Feedback
1

Hi! I am working on the Responsive Web Design Product Landing Page and am having problems meeting the requirements of the header menu staying at the top of my page when I scroll. When I try to make the header static, it messes up my design. Any help would be appreciated. Thank! Kerry Here is a link to CodePen. https://codepen.io/cliftonkerry/pen/BapdeJo

2

Static positioning is the default. It doesn’t make an element keep a fixed position.

3

Sorry, I erred with my terminology. I am having problem with having a fixed header without messing up my design. The header pushes out over my wrapper.

 ```       #header {
            background-color: #e75333;
            position: fixed;
        
        }

type or paste code here

4

Right, because the header is on its own layer. Now you must put extra space equal to the height of the fixed header before the next element. Alternatively you could use relative positioning equal to the height of the fixed header to position the next element below it.

5

Thanks! It looks like I might have to move my header out of the wrapper to fix it to the viewport top because setting it to fixed still does not pass the test.

6

No, you don’t have to. You do need to fix it to a location. Position fixed plus a location passes the test when I do it in your codepen. You also have a typo in the nav-link class.

7

Than ks, I was able to get it to fix by using top: 0;. I sill need to do adjust for space the header takes up over the wrapper and the @media queries. Maybe, the nav-link typo is what is giving me the error with validating the three nav links.

8

I was able to get the fixed header working better. The @media queries and css transitions seem a little choppy to me between screen sizes though. I also noticed the main links jump to the middle of a section instead of where I have the section headers. Thanks for your help! :slight_smile: https://codepen.io/cliftonkerry/pen/XWpzzwG

9

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