Bootstrap 3 navbar links not working

css, html, javascript, jquery, twitter-bootstrap

Solution

I had the very same problem caused by Javascript. Just give the a link an ID and the OnClick function lets you navigate smoothly.

HTML :

<div class="navbar-collapse collapse " id="templatemo-nav-bar">
    <ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
        <li class="active"><a href="index.htm">HOME</a></li>
        <li><a  id="aboutus">ABOUT US</a></li>
        <li><a id="clients">OUR CLIENTS</a></li>
        <li><a id="products">PRODUCTS</a></li>
        <li><a id="contact">CONTACT</a></li>
    </ul>
</div><!--/.nav-collapse -->

JS :

document.getElementById("aboutus").onclick = function () {
    location.href = "aboutus.html";
};

Problem

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

Original source

Bootstrap 3 navbar links not working

Solution

Problem

Related problems