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" data-spy="affix" data-offset-top="133" style="background-color: yellow">

Curiously, affix-top isn't declared in the HTML-code. Nevertheless, #nav.nav.navbar.navbar-default-affix-top is sized like: 1140px x 52px.

After scrolling and affix is fired, the class 'affix-top' changes to 'affix' and 'affix' is sized like: 1170px x 52px.

These are the 30px, the navbar grows to the right. But how can i stop it? Above all, I cannot find the class affix-top in any csv-files...

Answer 1

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

Answer 2

It worked for me when I gave the affix class a min-width of 100%. Works with responsive as well.

Answer 3

I cannot confirm that

min-width:100%

worked for me. I solved that problem using the innerWidth from the parent div. Following Example (includes one col - which of course needs to be put in a container and a row...):

<div class="col-sm-3 col-lg-2">
  <div class="sidebar">
    <div class="panel-heading">Some Title</div>
       <div class="panel-body">
         Some Content
       </div>
    </div>
  </div>
</div>

Following JS set the width property at the first occur of 'affix.bs.affix'. I also ensured window resizes would be catched as well by adding a handler to its resize event:

  //Applied affix to sidebar class
  $('.sidebar').affix({
        offset: {
            top: 0
        }
    }).on('affix.bs.affix',function(){
        setAffixContainerSize();
    });

    /*Setting the width of the sidebar (I took 10px of its value which is the margin between cols in my Bootstrap CSS*/
    function setAffixContainerSize(){
        $('.sidebar').width($('.sidebar').parent().innerWidth()-10);
    }

    $(window).resize(function(){
        setAffixContainerSize();
    });

Enjoy.