CODEWITHSUNDEEP
htmlcss
lparalyzed
lparalyzed

Reputation: 9

css fixed header fixed sections

I give the header fixed property, but the independent section is affected by it.

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 40px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 <header>
        <a href="#" class="logo">logo</a>
        <ul>
            <li>sdsdsd</li>
        </ul>
    </header>
    
    <section>
        adsdsadsdf
    </section>

Upvotes: 0

Views: 1514

Answers (1)

Devansh Kaushik
Devansh Kaushik

Reputation: 31

This is a very common problem with positioning the headers or navbars on a website.

The problem is that the position: fixed property puts the element out of the document flow and anything under it gets pulled behind the element.

One way to solve this problem would be to add margin-top property to the section underneath the header. This will bring down the section.

Other way (recommended way) would be to add position: sticky to the header instead of position: fixed. This will for the most part work the same as position: fixed but it will not pop out the element from the document flow.

The final code would look like:

header{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 40px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
<header>
  <a href="#" class="logo">Logo</a>
  <ul>
    <li>List Item</li>
  </ul>
</header>
    
<section>
  Section Area
</section>

There is a great article by Kevin Powell on this topic if you wanna check it out - https://www.kevinpowell.co/article/positition-fixed-vs-sticky/

Upvotes: 3

Related Questions