Bootstrap - Navbar collapse will not work

Question

I am a newbie in web development. Could someone help me figure out what is wrong with my Bootstrap code PLEASE? When the window is narrowed down to size of mobile devices the collapse button doesn't work and the menu will not drop down. I sincerely thank you for your response in Advance.

This is my CSS:

#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 14px;
background-color: rgba(248, 248, 248, 1);
border-width: 1px;
border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(119, 119, 119, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(51, 51, 51, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(85, 85, 85, 1);
background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #888;
}

This is my HTML:

<!DOCTYPE html>
<html>
<!-- HEAD BEGINS -->    
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <title>Bootstrap</title>

    <!------------------------- jQuery  ----------------- -->   
    <script type="text/javascript" src="jquery.min.js"></script>

    <!-- ----------------------- jQuery UI ----------------- -->

    <link rel="stylesheet" href="http://ajax.googleapis.com/
            ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
            libs/jqueryui/1.10.4/jquery-ui.min.js"></script>


    <!-- -------------------------- Bootstrap ------------------ -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- ----------------------- CSS STYLE ---------------------- -->

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

    <!-- ----------------------- JAVASCRIPT ---------------------- -->

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

</head>
<!-- HEAD ENDS -->

<body>

<div id="custom-bootstrap-menu" class="navbar navbar-
default"role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-menubuilder"><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 navbar-menubuilder">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="/">Home</a>
            </li>
            <li><a href="/products">Products</a>
            </li>
            <li><a href="/about-us">About Us</a>
            </li>
            <li><a href="/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</div>
</div>  
</body>
</html>

Answer 1

You're not including bootstrap.js in your HTML. Add it to either the head just after the bootstrap.min.css reference, or somewhere at the bottom of the page inside the body.

Bootstrap - Navbar collapse will not work

Question

1 answers

solution1
1 ACCPTED 2015-08-20 13:50:51

Bootstrap - Navbar collapse will not work

Question

1 answers

solution1 1 ACCPTED 2015-08-20 13:50:51

solution1
1 ACCPTED 2015-08-20 13:50:51