сделать загрузочный Navbar фиксированный после свитка

Question

Вот мой html код для навигации:

<div class="container"> 
    <nav class="navbar navbar-sm"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand"><i class="fa fa-home fa-lg"></i></a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class="dropdown-submenu"> 
          <a href="javascript:void(0)">Rent A Plant</a> 
          <ul class="dropdown-menu"> 
           <li><a href="javascript:void(0)">Why Indoor Plants</a></li> 
           <li><a href="javascript:void(0)">F.A.Q's</a></li> 
          </ul> 
         </li> 
         <li><a href="javascript:void(0)">Garden Maintenance</a></li> 
         <li><a href="javascript:void(0)">Vertical Gardens</a></li> 
         <li><a href="javascript:void(0)">Artificial Lawns</a></li> 
         <li><a href="javascript:void(0)">Garden Center</a></li> 
        </ul> 
       </li> 
       <li><a href="javascript:void(0)">Image Gallery</a></li> 
       <li><a href="{{ url('/store') }}" style="background: #916649">E-Store</a></li> 
      </ul> 
     </div> 
    </nav> 
</div> 

Над навигации у меня есть логотип height: 100 и width: 200

Итак, после прокрутки вниз около 130. Я хочу чтобы навигационная панель стала фиксированной. Поэтому я использовал это как мой jQuery

$(window).bind('scroll', function() { 
    var navHeight = 130; // custom nav height 
    ($(window).scrollTop() > navHeight) ? 
     $('nav').addClass('navbar-fixed-top') : 
     $('nav').removeClass('navbar-fixed-top'); 
}); 

Это работает совершенно нормально. Но длина навигатора становится полной, чего я не хочу. Я хочу, чтобы он оставался таким, каким он есть. Я имею в виду фиксированную длину.

Как это достичь?

Answer 1

Вы должны применить фиксированную ширину к элементу nav. Когда вы хотите его в центре страницы, а также установить левый и правый край на auto:

nav { 
    width: 100%; 
    margin: 0 auto; 
} 

@media (min-width: 768px) { 
    nav { width: 750px; } 
} 

@media (min-width: 992px) { 
    nav { width: 970px; } 
} 

@media (min-width: 1200px) { 
    nav { width: 1170px; } 
}