Header taken out document flow

HTML-CSS
1

Tell us what’s happening:

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

Hello,

I am doing the Product Landing page. When I try to position the header as fixed to the top of the page-wrapper, it takes it out of the flow of the document, and other elements are placed as if it does not exist.


HTML: 
 <div id="page-wrapper">

      <!-- if we position header fixed to this page wrapper, will it take it out of document flow? -->
      <header>
        <div class="logo-div">
          <img src="/Nike-logo.png" alt="nike-pic" srcset="">
        </div>

        <nav>

          <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Pricing</a></li>
            <li><a href="">About</a></li>
          </ul>
        </nav>
      </header>
</div>


CSS:

#page-wrapper{
  position: relative;
}


header{
  position: fixed;
  top: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
  min-height: 75px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

4

Hey. Sorry. I believe you responded to me. I’m sorry.

Is there any way you can help me with my issue? For the Product Landing Page…when I try to position my header fixed to the page wrapper…it takes the header out of the flow of the document. I appreciate your help. Thank you.

5

What if, instead of using position: fixed; (which you should avoid whenever you can) you used position: sticky;?

Is there a reason you’re married to position: fixed;?

1 Like
6

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