javascript - Bootstrap 3 navbar links not working

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>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>  <![endif]-->
<script src=".7.0/html5shiv.js"></script>
<script src=".js/1.4.2/respond.min.js"></script>

<nav class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
  <div class='container'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <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 (.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.

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>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>  <![endif]-->
<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'>
    <!-- Brand and toggle get grouped for better mobile display -->
    <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.

Share Improve this question edited Feb 17, 2015 at 6:34 asked Feb 17, 2015 at 3:53 Beengie 1,6084 gold badges20 silver badges40 bronze badges

Have you tried giving the links the class "navbar-link"? The code looks correct. Also make sure the link is correct. Try putting in "Google . com" or something for one of the links to test it. – The Disco Spider Commented Feb 17, 2015 at 4:05
I was hoping to just use the bootstrap css without having to add classes. Shouldn't that be part of the bootstrap css? This is the first time I have ever had this occur and I have used bootstrap for other navbar menus. This is the first time implementing a template made by someone else. – Beengie Commented Feb 17, 2015 at 4:08
Try to remove navbar-right class on top ul tag and then try to click links. Comment whether they are working or not. – iamawebgeek Commented Feb 17, 2015 at 4:08
I tried that @zazu but it only moved the contents to the left. – Beengie Commented Feb 17, 2015 at 4:09
1 Include more HTML please, othervise it is hard to guess what is happening. As a variant I can suggest to check handlers on links. – iamawebgeek Commented Feb 17, 2015 at 4:12

| Show 3 more comments

10 Answers 10

Sorted by: Reset to default 4

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";
};

To make an external link (all links that are not anchors) work inside the nav just add the class attribute with the value "external" inside youre <a> element. <a href="foo.html" class="external">Foo</a> . This helped me while using jquery.nav.js.

I am not sure what is happening with your code, but if there are js event handlers attached to your links you can try to remove handlers on links using:

$(document).ready(function () {
    $("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").off("click").off("mousedown");
});

Update
Try to manually send user to link, but this is not the right way. You can use the following code to verify are there any mask layers hiding the link (if nothing happened this time also than there are layers).

$(document).ready(function () {
    $("#bs-example-navbar-collapse-1").find("a:not(.dropdown-toggle)").on("click", function (e) {
         e.preventDefault();
         window.location = $(this).attr("href");
    });
});

Update 2
The problem is in your smooth scroll. You dont have hash property in your links.
Change your code to:

$('.navbar-nav > li').click(function(event) {
    if($(this).parent().parent().is("#bs-example-navbar-collapse-1")) return;
    event.preventDefault();
    var target = $(this).find('>a').prop('hash');
    $('html, body').animate({
        scrollTop: $(target).offset().top // this line here
    }, 500);
});

I have the same problem and changing the link extension to htm instead of html fixed it. Weird never had this happen before?

In my case, the problem was caused by a Javascript function, designed to detect a click anywhere on the page, but outside a specific menu div, in order to close it.

Replacing this:

$(this).click(function () {
    if ($('#accountMenu').is(':visible')) {
        $('#accountMenu').hide();
    }
});

with

$(document).mouseup(function (e) {
    var container = $("#accountMenu");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

helped me solve the problem.

The second fix needed was the function to handle opening the menu. The offending line being:

return false;

Once I removed the return completely it's working fine again.

I dont know if it helps but i had the same problem when i put overflow-x:hidden on html elemenet.

When just on body element it works, i was experimenting because i had some strange overflow.

So when i removed put overflow-x on html element actually the same problem occured like you said, hover and everything works but the link actually doesn't.

In my case, the problem was caused by the smooth scroll Javascript function that I had to delete in a second .js cloned file called for my particular case instead of the main one (I'll try to understand when I'll have time) :

//smooth scroll
    $('.navbar-nav > li').click(function (event) {
        event.preventDefault();
        var target = $(this).find('>a').prop('hash');
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 500);
    });

Hope this helps if in a hurry.

I had the same problem with my anchor links not working in my bootstrap nav bar, and after reading the answers here, it WAS the smooth scrolling that caused the problem. The script at the bottom...

  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a[href='#paintings'], a[href='#digitalart'], a[href='#advertisements'], a[href='#packaging'], a[href='#layout'], a[href='#logos'], a[href='#apparel'], a[href='#animation'], a[href='#videoproduction'], a[href='#frontend'], a[href='#landingpages'], a[href='#emailmarketing'], footer a[href='#PageTop'], a[href='#Back2Top']").on('click', function(event) {

...I kept using the ID tag, but had to add each hash #name to the script at the bottom and then it all worked fine!

I added class="external nav", and that allowed my links to work in the navbar.

In my case, I could solve this by adding "sticky-top" into nav class. I hope it could help. In this case I used BootstrapCDN https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap 3 navbar links not working - Stack Overflow

10 Answers 10

与本文相关的文章

评论列表(0)