How to make the header of a webpage remain at the top when scrolling?

Question

I would like to make the header of my webpage stay at the top of the page while the user scrolls through the rest. There are quite a few places online that show how to do this, such as here , but they all require specifying the widths and heights of the elements in so many pixels. What if I'm trying to make my elements responsive (I'm using Bootstrap) and resize themselves to fit the screen? How do I go about making the header stay where it is initially?

Answer 1

Since you are using Bootstrap, it comes with a class to do that:

Add the class navbar-fixed-top to your navigation div as follows:

<div class="navbar navbar-default navbar-fixed-top"> .... </div>

Answer 2

I think you just need to declare position: fixed to the header tag and that would do the trick. Here's an example

Answer 3

You should use position:fixed for the outer div. search for fixed nav bar, you will get a huge list or refer here