Product Landing Page: Fixed Header Issue

Hi,

I’m not sure why I can’t see the elements I’ve created below my header? It seems to either be that my body elements are starting at the top and ignoring the header or that they aren’t there all together. I’ve tried switching to position: sticky; instead of fixed as I’ve read in other threads, but it doesn’t seem to make a difference. Help?

header {
position: sticky;
top: 0px;
bottom: 500px;
min-height: 400px;
padding-bottom: 150px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #F5F3EF;
}

Thank you,
Steph

First, you’ve got a bottom padding of 150px on the header which adds to the total height of the header and thus is causing the header to cover the content below. I don’t think you need this bottom padding. Is there a reason you have it?

Second, since the header is fixed at the top you will need to compensate by lowering the content that follows so that it doesn’t go underneath the header. In your case, the container div follows the header, so you can add enough top padding to the container div so it is always below the header.

Thank you so much! Still learning a lot!

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