Bootstrap 3 affix navbar становится прозрачным и непривлекательным при прокрутке и перекрытии содержимого

Question

Я уверен, что это очень просто, но я довольно новичок в Bootstrap и даже html/css.

Я хочу, чтобы мой навигатор был после моего заголовка и прикреплялся к вершине, прокручивая его. Я получил эту работу, НО: navbar становится прозрачным и непривлекательным при прокрутке и над другим содержимым.

Как я могу это преодолеть?

Вот мой .html:

`

<div id="nav" class="navbar navbar-default"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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">Your Company</a> 
    </div> 
    <div class="collapse navbar-collapse" style> 
     <ul class="nav navbar-nav"> 
     <li class="active"> 
      <a href="#">Home</a> 
     </li> 
     <li> 
      <a href="#about">About</a> 
     </li> 
     <li> 
      <a href="#everyday">Everyday</a> 
     </li> 
     <li> 
      <a href="#contact">Contact</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

`

Вот мой аффикс .css:

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

Вот мой аффикса, связанные ЯШ:

$(function() { 
    $('#nav-wrapper').height($("#nav").height()); 

    $('#nav').affix({ 
     offset: { top: $('#nav').offset().top } 
    }); 
}); 

Спасибо!

Answer 1

z-index Изменение в #nav на:

#nav{ 
    z-index:9999; 
}