3

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!

Mo.
  • 26,306
  • 36
  • 159
  • 225
user3096342
  • 33
  • 1
  • 4

1 Answers1

7

Change the z-index of #nav to :

#nav{
  z-index:9999;
}
Mo.
  • 26,306
  • 36
  • 159
  • 225
luidgi27
  • 324
  • 2
  • 15
  • Note that you might not see the fix right away while testing it in Chrome Dev Tools (haven't tested this in Firefox or IE). This only worked for me after changing the source and loading the page with it. Also, even after this fix there still seems to be another issue with the smaller version of the navbar when scrolling it in Chrome 38.0.2125.111 (64-bit) - not in Firefox 33 though - when the navbar contents become hidden by the background color. – Herick Nov 19 '14 at 20:33