Twitter bootstrap 3: Navbar changes width when affix fires

Question

Well, I have a curious issue concerning the bootstrap-3 affix script. You can see the problem in this fiddle. Please maximise the result-frame horizontally and scroll down so that affix gets fired. As you can see, the navbar increases at the right side and I really cannot see any reason for this effect. I temporarily solved the problem by addng ``` .container { padding-left: 0px; padding-right: 0px; } ``` to the css. But, as you can see, it's not very pretty and I don't want to remove these paddings. Alternatively, I can set a static width, like ``` width: 1140px; ``` in #nav.affix. But this is not very responsive... I realy tried a lot of approaches, but couldn't get any satisfying results. Do you know, what's causing it? Edit Okay, Chrome's debugger gives me further informations: Before affix is fired, the nav-element got the class 'affix-top' amongst others (abstract from chrome-debugger NOT html source!): ``` <nav id="nav" class="navbar navbar-default affix-top" role="navigation"…

Accepted Answer

You can't solve that. The problem is the `position: fixed;`. The Navbar will be rendered by the browser without `left` or `right` property.

You can only solve the issue with three things:

1. Use absolute positioning.

Use `position: absolute;` and change the `top` value on scrolling with jQuery. disadvantage: You need a Javascript-part for that.

2. set left/right

Set a `left: ?px;` or `right: ?px`

3. define a special width

Set a `min-width: ?px;` and/or `max-width: ?px;` for each media-query

Twitter bootstrap 3: Navbar changes width when affix fires

Solution

Problem