Bootstrap navbar collapse not working

Question

I am working on a website and I can't figure out why my navbar won't collapse. It seems that the when the window gets small enough the navbar goes away, but the button doesn't show up. Here is the code:

<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<html lang="en">
    <head>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE-edge"><!--latest IE-->
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="JS/bootstrap.js"></script>
        <title></title>
        <!--========================icons=================================-->
        <link href="" type="image/x-icon" rel="icon" ><!--16x16--><!--put favicon.ico in root-->
        <link rel="apple-touch-icon" href="" >
        <!--**use when shitty phones are needed to be supported**
            <meta name="handheldfriendly" content="true">
            <meta name="mobileoptimized" content="240">
        -->
        <link type="style/css" rel="stylesheet" href="CSS/bootstrap.css">

    </head>
    <body>
        <div class="container-fluid">
            <header class="page-header clearfix">
                    <div class="navbar-header">
                        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target = ".bs-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>
                    <nav class="collapse navbar-collapse bs-navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Work</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                    </nav>
            </header>

        </div>
    </body>
</html>

I know that the file path to my boostrap.js file is correct. What am I doing wrong? Am I missing something? Thanks you!

Answer 1

You can not currently see your icon-bars, since they are white-on-white. Here's a quick mod of your code that colors the bars red - showing them working.

 <!DOCTYPE html> <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <html lang="en"> <head> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE-edge"><!--latest IE--> <meta name="description" content=""> <meta name="author" content=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <title></title> <!--========================icons=================================--> <link href="" type="image/x-icon" rel="icon" ><!--16x16--><!--put favicon.ico in root--> <link rel="apple-touch-icon" href="" > <!--**use when shitty phones are needed to be supported** <meta name="handheldfriendly" content="true"> <meta name="mobileoptimized" content="240"> --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> .icon-bar { background: red; } </style> </head> <body> <div class="container-fluid"> <header class="page-header clearfix"> <div class="navbar-header"> <button class="navbar-toggle collapsed dropdown-toggle" type="button" data-toggle="collapse" data-target=".bs-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> <nav class="collapse navbar-collapse bs-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Work</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> </div> </body> </html>

Bootstrap navbar collapse not working

Question

1 answers

solution1
3 ACCPTED 2015-04-10 18:13:16

Bootstrap navbar collapse not working

Question

1 answers

solution1 3 ACCPTED 2015-04-10 18:13:16

solution1
3 ACCPTED 2015-04-10 18:13:16