Bootstrap fixed div (width increase to 100%)

Question

I am working with bootstrap 3 and I like to create my fixed header. The problem is when the fixed header get fixed the header increase to a width 100%.

I have put my problem into an example:

http://www.bootply.com/MTi0Nr1N9s

Here is a screen what happens:

http://awesomescreenshot.com/0a75pjah7a

Does anybody has an idea whats wrong?

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

This is due to the normal behaviour of position:fixed:

The position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

Source: answer

To overcome this problem, you have to fix the width of container (example: width: 1170px) and changing the width of the header to inherit instead of 100%.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 14 '16 at 14:44

silviagreen

1,679
1
18
39

1

Is there any way to do this and keeping the site responsive? – dermold Mar 14 '16 at 15:23
I am afraid there isn't, but you can try to use navbar-fixed-top class of bootstrap to try to overcome this problem – silviagreen Mar 14 '16 at 15:30

Bootstrap fixed div (width increase to 100%)

1 Answers1