javascriptjqueryhtmlcsstwitter-bootstrap

Reputation: 1608

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="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.

Upvotes: 6

Answers (10)

Naoko Okada

Reputation: 1

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

Upvotes: 0

Rory Perro

Reputation: 451

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

Upvotes: 0

Sharif

Reputation: 1

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!

Upvotes: 0

SabRallte

Reputation: 31

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.

Upvotes: 3

bobito

Reputation: 1

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.

Upvotes: 0

squizyt

Reputation: 31

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.

Upvotes: 0

MeanGreen

Reputation: 3315

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.

Upvotes: 0

Goodlife

Reputation: 3922

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

Upvotes: 4

tony

Reputation: 1

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

Upvotes: 0

iamawebgeek

Reputation: 2865

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

Upvotes: 1

Bootstrap 3 navbar links not working

Answers (10)

Related Questions