title: Nav menu shifting right when bootstrap modal popup displayed
body: <p>When modal pops up the right scroll dissapeared the main contend not moving -  so that is fine, but nav menu shifting right filling the scroll space.
  Then when I am closing the popup scroll appeares and menu shifted back.
  Any ideas how to prevent menu shifting?
  Using Bootstrap v3.3.1 </p>
  
  <p>That is how my menu looks like:
  
      </p>
  
  <pre><code>    &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="/" id="navbar-brand"&gt;MySite&lt;/a&gt;                
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="home"&gt;
                  &lt;a href="/" class="btn_main"&gt;&lt;i class="fa fa-home" title="home"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;               
              &lt;li&gt;&lt;a href="/contact"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
  
          &lt;li&gt;&lt;a href="/account/login" id="loginLink"&gt;Login&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  here is my modal popup:</p>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="exampleModalLabel"&gt;Title&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form name="form-contact" id="form-contact" class="form-validation"&gt;
  
                  &lt;div class="form-group"&gt;                        
                      &lt;input type="email" class="form-control" placeholder="Enter your email" ng-model="contact.email" required=""&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group hide"&gt;
                      &lt;textarea class="form-control" rows="6" placeholder="Type your message"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" id="submit-form" class="hidden"&gt;
              &lt;/form&gt;                                
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
  
              &lt;label for="submit-form" class="btn btn-warning font-bold"&gt;Click!&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong>
  I just found a fix here <a href="https://github.com/twbs/bootstrap/issues/14040" rel="nofollow">https://github.com/twbs/bootstrap/issues/14040</a></p>
  
  <pre><code>.modal-open .navbar-fixed-top,
  .modal-open .navbar-fixed-bottom {
  padding-right: 17px;
  }
  </code></pre>
  
  <p>Does that means that it is a bug in bootstrap?</p>
  
  <p><strong>UPDATE 2</strong>
  The above behaviour applied to all latest WebKit based browsers, but just checked IE 12 and there the whole page shifting right when modal appeared.</p>