Bootstrap Menu not dropping or Collapsing

Question

I am current building a parallax bootstrap theme. I am having trouble understanding what is preventing the menu dropping down and the menu collapsing when the screen is resized.

Has any body had this problem before? I have tried switching where the position of the style sheets, including the js files in the footer but not success. Does anybody see the problem here just form the html?

<!DOCTYPE html>
<meta charset="UTF-8">

<html lang="en">

<head>
    <title>Title</title>

        <!-- Global Attributes -->
        <link rel="icon" href="img/favicon.ico">
        <!--[if IE]><link rel="SHORTCUT ICON" href="img/favicon.ico"/><![endif]-->

        <!-- Required Parralax JavaScript -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.stellar.min.js"></script>
        <script type="text/javascript" src="js/waypoints.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script src="js/bootstrap.js"></script> 


        <!-- Required Styles for theme -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

</head>

<body>

<header>
        <div class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                </button>
                                <a href="index.html" class="navbar-brand"><img src="img/logo.png"></a>
                        </div>


                        <div class="navbar-collapse collapse">
                                <ul class="menu nav navbar-nav pull-right">
                                        <li class="dropdown">
                                                <a href="#" class="dropdown-toggle hover1" data-toggle="dropdown">Cat 1<b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                        <li><a href="#">Sub Cat 1</a></li>
                                                        <li><a href="#">Sub Cat 2</a></li>
                                                        <li><a href="#">Sub Cat 3</a></li>
                                                        <li><a href="#">Sub Cat 3</a></li>
                                                </ul>
                                        </li>


                        </div> 
                </div>
        </div>
</header>

Answer 1

Your line:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

should be

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">

Bootstrap Menu not dropping or Collapsing

Question

1 answers

solution1
0 2013-12-13 03:05:04

Bootstrap Menu not dropping or Collapsing

Question

1 answers

solution1 0 2013-12-13 03:05:04

solution1
0 2013-12-13 03:05:04