bootstrap 3 - hrefs -navigation links not working

I've never encountered this. My site navigation on this page: http://ikonltd.com/index-bootstrap.cfm is not working. But the code is completely fine.  When I click on any of the links, they don't go anywhere - I just stay on the page.

http://ikonltd.com/index-bootstrap.cfm

<!DOCTYPE html> 
<html>






<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<TITLE>IKON Ltd Contemporary Art Gallery</TITLE>

<!-- Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <script src="js/respond.js"></script>
    <!--end bootstrap-->

<link href="css/main.cfm" rel="stylesheet" type="text/css" />

<!-- js for slide show-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshowresp.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script language="JavaScript" type="text/javascript" src="http://ikonltd.com/cf_js/cfslide2.cfm"></script>
<script language="JavaScript" type="text/javascript" src="http://ikonltd.com/cf_js/cfslide_iimagelist2.cfm"></script>

<!--background from nahem site-->
<script type="text/javascript" src="http://ikonltd.com/js/MooTools-Core-1.5.1.js"></script>
<script type="text/javascript" src="http://ikonltd.com/js/fullscreen_bg/moo_12.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>



</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12 logoNew" style="background:#126eca;">
<a  href="http://ikonltd.com/"><img class="img-responsive" border="0" src="http://ikonltd.com/images/logo-trans-new.png" /></a>
</div>
</div><!--.row-->

<!-- row 1: navigation -->
    <div class="row">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav  nav-justified">
<li ><a  href="http://ikonltd.com/current/">Current Exhibition</a></li>
<li ><a href="http://ikonltd.com/new/">Featured Works</a></li>
<li ><a href="http://ikonltd.com/artists/">Artists</a></li>
<li ><a href="http://ikonltd.com/past/">Past Exhibitions</a></li>
<li ><a href="http://ikonltd.com/about/">About</a></li>
<li ><a href="http://ikonltd.com/contact/">Contact</a></li>
<li class="active"><a href="http://ikonltd.com/">Home</a></li>
</ul>
          </div>
       
      </nav>
    </div>
<div class="row">
<div id="fadeshow1" style="margin:0 auto;"></div><!--.fadeshow1-->
</div><!--.row-->





</div><!--.container-->


<script type="text/javascript">
//<![CDATA[

FullScreenBG.init('http://ikonltd.com/images/2010/ikon-blank-wall.jpg');

//]]>
</script>
<!--eof show thumb on rollover for artist landing page-->
<!-- bootstrap javascript -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Open in new window

phillystyle123Asked:
Who is Participating?
 
phillystyle123Author Commented:
Thanks for the help, Edwin. Coldfusion runs fine on my server or it wouldn't display at all.

This appears to be an instance of calling jquery 2x.

in the footer:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

and, in the head of the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

I moved this:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
to the head and deleted:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

The nav is working properly now.
0
 
Edwin HofferTechnical ExpertCommented:
Hello Philly Style,

The page is in html format, you must have to use .html extension to make the link working. I tried it by downloading the page and its working fine if the page extension is .html.

Hope this will resolve your issue.

Best Regards
0
 
phillystyle123Author Commented:
Solution was due to calling jquery 2x.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.