title: Bootstrap 3 navbar links not working
body: <p>I have a navbar with links in it. The "brand" link is working but nothing in the <code>ul</code> does. I have read things about <code>e.preventDefault();</code> being a problem when it is with the <code>$('ul.nav &gt; li').click(function (e) {</code>. I also have read where it has something to do with the <code>z-index</code>. I don't find any of those to be the case (unless I couldn't find it embedded in a <code>js</code> file loaded with the application and not residing in my assets folder).</p>
  
  <p>What could cause this?</p>
  
  <p>I'm not sure whether it would be in the <code>css</code> or the <code>js</code> file.
  Also, the toggle works fine, it's just the active links.</p>
  
  <pre><code>&lt;head&gt;
  &lt;title&gt;Welcome&lt;/title&gt;
  &lt;meta charset='utf-8'&gt;
  &lt;meta content='IE=edge' http-equiv='X-UA-Compatible'&gt;
  &lt;meta content='width=device-width, initial-scale=1' name='viewport'&gt;
  &lt;meta content='' name='description'&gt;
  &lt;meta content='' name='author'&gt;
  &lt;meta name="csrf-param" content="authenticity_token" /&gt;
  &lt;meta name="csrf-token" content="PZfcHJlhwRF4SMTlLODmWg4gv/d8eli2VqnZm1i/dnjyUhKjUkZXq+2jeMjfU/eYiArG5oU0Ur1VG6GLBYik6Q==" /&gt;
  &lt;link rel="stylesheet" media="screen" href="/assets/rails_bootstrap_forms-85a44da0cf14906976bde10ea0a42bbc.css?body=1" /&gt;
  &lt;link rel="stylesheet" media="screen" href="/assets/application-7b065b027fe33201010948bc34f4a7db.css?body=1" /&gt;
  &lt;link rel="stylesheet" media="screen" href="/assets/font-awesome.min-c657d02924cca8259559612983a6a227.css?body=1" /&gt;
  &lt;link rel="stylesheet" media="screen" href="/assets/modern-business-788410311885bd8eb9a8a947b93e1c6f.css?body=1" /&gt;
  &lt;script src="/assets/bootstrap-f069863cd7c15927c7faef4bba9fc907.js?body=1"&gt;&lt;/script&gt;
  &lt;script src="/assets/bootstrap.min-759065b3d223bc01ce2f7ad79e06c909.js?body=1"&gt;&lt;/script&gt;
  &lt;script src="/assets/contact_me-55e60d5e2f601e0adf79fc9dea175bf3.js?body=1"&gt;&lt;/script&gt;
  &lt;script src="/assets/jqBootstrapValidation-d5764d00e4f4b8d79882008d22d482fa.js?body=1"&gt;&lt;/script&gt;
  &lt;script src="/assets/jquery-89fdfdd2b961da1c1dac57e8beeff312.js?body=1"&gt;&lt;/script&gt;
  &lt;script src="/assets/application-467c055a5b9b03c420678f7bae6bd21f.js?body=1"&gt;&lt;/script&gt;
  &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
  &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
  &lt;!--[if lt IE 9]&gt;  &lt;![endif]--&gt;
  &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
  &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'&gt;
    &lt;div class='container'&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class='navbar-header'&gt;
        &lt;button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'&gt;
          &lt;span class='sr-only'&gt;Toggle navigation&lt;/span&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='/'&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
    &lt;div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'&gt;
    &lt;ul class='nav navbar-nav navbar-right'&gt;
      &lt;li&gt;&lt;a href='/about.html'&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='/services.html'&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='/contact.html'&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li class='dropdown'&gt;
        &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;
          Portfolio
          &lt;b class='caret'&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class='dropdown-menu'&gt;
              &lt;li&gt;
                &lt;a href='/this.html'&gt;This&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/that.html'&gt;That&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/other.html'&gt;The other&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class='dropdown'&gt;
            &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;
              Blog
              &lt;b class='caret'&gt;&lt;/b&gt;
            &lt;/a&gt;
            &lt;ul class='dropdown-menu'&gt;
              &lt;li&gt;
                &lt;a href='/bikes.html'&gt;Bikes&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/planes.html'&gt;Planes&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/trains.html'&gt;Trains&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class='dropdown'&gt;
            &lt;a class='dropdown-toggle' data-toggle='dropdown' href='#'&gt;
              Other Pages
              &lt;b class='caret'&gt;&lt;/b&gt;
            &lt;/a&gt;
            &lt;ul class='dropdown-menu'&gt;
              &lt;li&gt;
                &lt;a href='/candy.html'&gt;Candy&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/fruit.html'&gt;Fruit&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/lost.html'&gt;Lost&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/found.html'&gt;Found&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href='/haircuts.html'&gt;Hair Cuts&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>While inspecting elements, I found an error...
  <code>TypeError: undefined is not an object (evaluating '$(target).offset().top')</code> which points to this part of the <code>jquery.js</code> file.</p>
  
  <pre><code>//smooth scroll
  $('.navbar-nav &gt; li').click(function(event) {
      event.preventDefault();
      var target = $(this).find('&gt;a').prop('hash');
      $('html, body').animate({
          scrollTop: $(target).offset().top // this line here
      }, 500);
  });
  </code></pre>
  
  <p>However, when I look at the jquery documentation (<a href="http://api.jquery.com/event.preventdefault/" rel="noreferrer">http://api.jquery.com/event.preventdefault/</a>), it say, "<em>If this method is called, the default action of the event will not be triggered.</em>". So it seems that might be the case, but I'm not sure how to get around it.</p>