CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Faisal148991
Faisal148991

Reputation: 47

Navbar Link to other pages not working

I am trying to link the "Photography" section in my navbar to the page photos.html. However for some reason the link is not working, yet when I enter the page in the URL the correct page appears. I have tried the link outside to the navbar list and it works yet for some reason does not work when I link it to one of the selections in the navbar. 

    <nav class="navbar navbar-default navbar-fixed-top navbar-centered navbar-custom">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href=#title><img src="rectangle_logo(1).png" height="25px"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-center">
                <li> <a href=#title>Home </a></li>
                <li> <a href=#about> About</a></li>
                <li> <a href=#Projects> Projects </a></li>
                <li> <a href="photos.html">Photography </a><li> //here is where I try and link to the next page
                <li><a href=#Contact> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

Home Page and Page that need to Redirect user to

Upvotes: 1

Views: 6250

Answers (3)

sepiott
sepiott

Reputation: 610

Your JavaScript function prevents the link to work properly:

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

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

}

You could user classes on the links, that your function is supposed to work on:

 <ul class="nav navbar-nav navbar-center">
     <li> <a href="#title" class="prevent">Home </a></li>
     <li> <a href="#about" class="prevent"> About</a></li>
     <li> <a href="#Projects" class="prevent"> Projects </a></li>
     <li> <a href="photos.html">Photography </a></li> //here is where I try and link to the next page
     <li> <a href="#Contact" class="prevent"> Contact </a></li>
</ul>

And then change your JavaScript to the new class:

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

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

}

Upvotes: 4

boomcode
boomcode

Reputation: 399

There is an error in the code

 $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){


Can not read property top of undefined

Upvotes: 0

AVI
AVI

Reputation: 5703

There is a typo

<li> <a href="photos.html">Photography </a><li>

have to be closed <li> tag as </li>

<li> <a href="photos.html">Photography </a></li>

Upvotes: 1

Related Questions