Bootstrap 3 : fix div row

Question

I have two divs :

<div class="row">
</div>


<div class="row">
</div>

I need to fix the first one while scrolling. I did this :

<div style="position:fixed" class="row">
</div>

Now the divs are overlapping : https://jsfiddle.net/DTcHh/22068/

How can I solve this ?

Answer 1

HTML:

<div class="row fixed"></div>
<div class="row padding"></div>

CSS:

.fixed {
  position: fixed;
  background: #fff;
  z-index: 10;
  width: 100%;
}
.padding {
  padding-top: 54px // height of your fixed row, you have to change this value on different screen sizes (using media queries)
}

JSFIDDLE