Please help me I am working on Product landing page , which is almost completed , but I am unable to put navigation bar on top always
here is my page : ‘https://codepen.io/shubham10200/full/EqXrjo’
When I try to put nav bar on top by giving header position: fixed property ,everything sucks
Did you do ALL of the steps I sent you? If you did, it should look like what I produced.
Show us your NEW #header {} code block.
Do not delete any code that was already there.
That is because position: fixed takes the element out of the normal document flow. You can push the content below the header down using padding/margin (top).
You can also instead use position: sticky; on the header. You will likely want to remove the default margin on the body as well.
#header {
position: sticky;
top: 0;
}
I will say, it might be a good idea to learn how to use position: fixed and how to deal with the “issues” caused by the element being taken out of the normal document flow.
Giving margin worked Thank you so much .
I wanna ask one more thing:
In my footer section everything working fine in my code editor ( when I open my codes in chrome ),
But when I upload the same codes to codepen , my margin-right not working .
Where is the problem?
You don’t need the width on the footer because you are using the body as a wrapper (the left/right padding). But if you do want to give elements a width you should use max-width so they can still shrink.