Bootstrap 4 Cards hiding fixed Header while scrolling

Question

Below is an Html code with bootstrap 4. It has a fixed Header and Footer with scrollable bootstrap Cards in between. While scrolling, some of the Cards hides the Header. How to make the Cards scroll "behind" the Header ?

 <header style="position: fixed; left: 0; top: 0; width: 100%;" class="bg-info text-center">header</header>
 <br><br>
 
<div class="container">
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>

<footer style="position: fixed; left:0; bottom:0; width:100%;" class="bg-info text-center">footer</footer>

see it in action here

score 0 · Answer 1 · answered Dec 03 '20 at 13:35

0

You can use z-index for header.

You can give number whatever you want and this number will makes element moves on z index.

Add to your style or css

header{
z-index:99;
}

answered Dec 03 '20 at 13:35

Göksel ÖZER

267
1
9

score 0 · Accepted Answer · answered Dec 03 '20 at 13:38

You are not using the bootstrap in a proper way. For header and footer use nav bar which is provided by bootstrap instead of header and footer.

For Fixed header:-

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

For Fixed Footer:-

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

Reference:-

https://getbootstrap.com/docs/4.0/components/navbar/#placement

Bootstrap 4 Cards hiding fixed Header while scrolling

2 Answers2