Bootstrap 3 affix navbar becomes transparent and unclickable when scrolling and overlapping content

I'm sure it's very simple but I'm pretty new at Bootstrap and even html/css.

I want my navbar to be after my header and fixed to the top when scrolling past it. I got this working, BUT: the navbar becomes transparent and unclickable when scrolling and above my other content.

How do i overcome this?

Here's my .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>

`

Here's my affix .css:

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

Here's my affix related js:

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

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

Thank you!

Answers


Change the z-index of #nav to :

#nav{
  z-index:9999;
}

Need Your Help

Autologin using ASIHTTPRequest in a web based form login inside a UIWebView

ios uiwebview asihttprequest autologin uiwebviewdelegate

I'm trying to accomplish an autologin using ASIHTTPRequest library in a web based form login inside a UIWebView. I want to make it persistant, so the following requests made by the user in the UIWe...

Load from URL to ImageView with Picasso without white flash on ImageView

android picasso

I'm using the Picasso library from Square to load a URL string into an ImageView. I'm calling this several times on an array or URLs with a Timer to change the ImageView image.