Problem with position fixed property

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 :frowning:
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 :frowning:

Why not show us what you tried to do?

You will need to work on your #header selector. Follow this pseudo code. notice the code elements:

  • Your header needs to have a fixed position.
  • The position of the header with be zero pixels from the top and zero pixels from the left.
  • The header will need to be as wide as the viewport.
  • Give it a background colour so the other elements are hidden as the pass under the header.
  • You could push the header up the z-index so that it is displayed above other elements.

The result:

1 Like

Hi Leebut , thanks for your reply :slight_smile:
Whenever I add position: fixed; property to #header element , my page becomes like this :frowning:


where I am going wrong ?

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.

1 Like

I did everything you mentioned but It’s overlapping form section. here is my header

#header{
  display: flex;
  flex-direction: row;
 align-items: center;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: brown;
 right: 0;
}

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.

2 Likes

Giving margin worked :slight_smile: 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 :neutral_face:.
Where is the problem?

We don’t know what it should look like, so post a screenshot.
Like this?

1 Like

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.

1 Like