One Page Theme Bootstrap Navigation Link Does Not Direct To Another Page, While It Works For Anchors Inside The Page

I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link

Solution 1:

In the href link call the class "external" like this:

<a href="./ShoppingCart"class="external">

Solution 2:

i experienced the same some of the element may overlap your link, just increase the z-index of the link separately

Solution 3:

I just solved this issue in my project.

The file plugin.js was causing the trouble, in my case, because the template itself was a one-page template.

I commented-out the line:

self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));

And the links in the nav just work fine.

Solution 4:

I had a similar issue with the template. The application.js file has a script that makes this happen. So you should be able to just remove the scroll class from the a tag to allow redirect.

/* use class="scroll" on the a element to activate*/
  $(".scroll").click(function (event) {
      event.preventDefault();
      //calculate destination placevar dest = 0;
      if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
          dest = $(document).height() - $(window).height();
      } else {
          dest = $(this.hash).offset().top - 50;
      }
      //go to destination
      $('html,body').animate({
          scrollTop: dest
      }, 1500, 'swing');

    /* Fix jumping of navigation. */setTimeout(function() {
        $(window).trigger('scroll');
    }, 900);

    returnfalse;

  }); 

Solution 5:

here is the solution on this page:

a href is not going to other pages

open up your console and then click the inspection tools and then click on the link to open what script runs when you click on that link. you have to state an if statement to say: if (".navbar a" =! ".external"){here goes the rest of li that have external links and now it works}

and then add the external links to the li tags that have external links.

if (".navbar a" =! ".external"){
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hashvar hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)window.location.hash = hash;
    });
  });
}