Reputation: 11

Bootstrap navbar links don't work

My friends have asked me to make a website for their production company, which I've been working on, but as I am not a professional web designer, I've run into some issues. I've worked on this site by customizing a template I found online. However, I've come across an issue that I can't seem to fix despite searching here and on several other sites. The links in the navbar do not function when clicked. I was hoping someone could take a look and see if they've got any suggestions. The site can be found here.

This is my index HTML file-

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta name="robots" content="all,follow">
    <meta name="googlebot" content="index,follow,snippet,archive">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Great Red Spot Productions | New Orleans, LA</title>

    <meta name="keywords" content="">

    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'>

    <!-- Bootstrap and Font Awesome css -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme stylesheet -->
    <link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">

    <!-- Custom stylesheet - for your changes -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- owl carousel css -->

    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.theme.css" rel="stylesheet">

    <!-- CSS Animations -->
    <link href="css/animate.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.png">

    <!-- Mordernizr -->
    <script src="js/modernizr-2.6.2.min.js"></script>

    <!-- Responsivity for older IE -->
    <!--[if lt IE 9]>
    <script src="js/respond.min.js"></script>
<![endif]-->
</head>

<body data-spy="scroll" data-target="#navigation" data-offset="120">

    <!-- *** NAVBAR ***
_________________________________________________________ -->

    <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="navbar-collapse collapse" id="navigation">

              <ul class="nav navbar-nav navbar-right">
                  <li class="active"><a href="index.html">Home</a>
                  </li>
                  <li><a href="about.html">About Us</a>
                  </li>
                  <li><a href="services.html">Services</a>
                  </li>
                  <li><a href="portfolio.html">Portfolio</a>
                  </li>
                  <li><a href="blog.html">Blog</a>
                  </li>
                  <li><a href="contact.html">Contact</a>
                  </li>
              </ul>
            </div>
            <!--/.nav-collapse -->

        </div>
    </div>
    <!-- /#navbar -->

    <!-- *** NAVBAR END *** -->


    <div id="all">


        <!-- *** INTRO IMAGE ***
_________________________________________________________ -->
        <div id="intro" class="clearfix">
            <div class="item">
                <div class="container">
                    <div class="row">
                        <div class="carousel-caption">
                            <span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- *** INTRO IMAGE END *** -->


    <!-- /#all -->

    <!-- #### JAVASCRIPT FILES ### -->

    <!-- js base -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- for demo purpose -->
    <script src="js/jquery.cookie.js"></script>

    <!-- waypoints for scroll spy -->
    <script src="js/waypoints.min.js"></script>

    <!-- maps -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script src="js/gmaps.js"></script>

    <!-- masonry layout -->
    <script src="js/masonry.pkgd.min.js"></script>

    <!-- owl carousel -->
    <script src="js/owl.carousel.min.js"></script>


    <!-- jQuery scroll to -->
    <script src="js/jquery.scrollTo.min.js"></script>

    <!-- jQuery counter -->
    <script src="js/jquery.counterup.min.js"></script>

    <!-- jQuery parallax -->
    <script src="js/jquery.parallax-1.1.3.js"></script>

    <!-- main js file -->

    <script src="js/front.js"></script>





</body>

</html>

I'm not sure what other files would be necessary for help, please just let me know if you need any other info.

Upvotes: 1

Answers (3)

Jacob Ingalls

Reputation: 64

It looks like the tutorial/example you used had the links scroll to the section it referred to. We can see this is the case as when we click on a link the error comes from jquery.scrollTo.min.js.

There must be a function that is called every time you click the menu items. This would either be inline in your index file, or in one of the many js files you included.

One debug method would be to comment out js files included until the links correctly, this should work as when javascript on the page is turned off the links work just fine.

Good luck!

Upvotes: 0

Nima shayesteh

Reputation: 1

The problem is your jquery.Please use of the latest jquery version 3.1.1,it may help you,And define them in the correct place of your code.Download the bootstrap and set it in your html page.

Upvotes: 0

XYZ

Reputation: 4480

There are errors in your javascript.Open the developer tools you can view that.That errors may be preventing that links from functioning.

Upvotes: 3

Bootstrap navbar links don&#39;t work

Answers (3)

Related Questions

Bootstrap navbar links don't work