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. ```

Cover Designs 4
Video Trailers 5
Web Banners 5

``` 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 con…

Accepted Answer

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/

bootstrap fixed header when scrolling down

Solution

Problem