bootstrap fixed header when scrolling down

Question

I am working within bootstrap's core admin structure and have a main header at the top of the page and then a sub header beneath it. I am trying to allow that sub header to fix to the top of the page when the user scrolls down so they can always see that information, but I am having a bit of trouble.

The section I would like to stick to the top looks like this.

<div class="area-top clearfix" >
  <div class="pull-left header">
    <h3 class="title"><i class="icon-group"></i>Dashbord</h3>
  </div><!--.header-->
  <ul class="inline pull-right sparkline-box">
    <li class="sparkline-row">
      <h4 class="blue"><span> Cover Designs</span> 4</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="green"><span> Video Trailers</span> 5</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="purple"><span> Web Banners</span> 5</h5>
    </li>
  </ul>
</div><!--.area-top-->

and I have tried so far to wrap that in another div with the navbar navbar-fixed-top classes. But that shot it to the top right away and overlapped content that needs to be seen.

I have also tried using plain css by adding position:fixed; to the current div, but that messes up the breadcrubms I have laying underneath it because it takes it out of the flow.

Is there anyway to accomplish this with just css. I know I can do a hack with jquery, but in my team I am only in charge of the css.

Answer 1

you can use below css to the sub header navbar.

css:

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

Add 'sticky-top' class to sub header.

for eg: you can see the fiddle below which is similar to the question.Here second menu fixed to top when user scrolls.

https://jsfiddle.net/raj_mutant/awknd20r/6/