Mobile Navbar won't show when clicked

When viewing at mobile screen resolution and you select the mobile nav icon bar, nothing happens. The desired effect is to have the same main navigation be used in mobile. I have ensured my data-targets (mobile_nav) match, and that markup looks good, but am new to Bootstrap. Any help appreciated!

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Loading Fonts Awesome CDN from boostrapcdn.com -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
<!-- add padding from best practices for fixed topbar navs -->
<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="#mobile_nav" >
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="" class="navbar-brand">Brand</a>
                    </div>
                    <div class="collapse navbar-collapse" id="mobile_nav">
                        <ul class="nav navbar-nav">
                            <li><a href="">Link 1</a></li>
                            <li><a href="">Link 2</a></li>
                        </ul>
                        <form action="" class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
            </div>
        </div>    
</header>    
</body>
</html>              

Answers


Bootstrap requires jQuery to work, you should include it before the Bootstrap JS in your HTML:

<!-- JQuery -->    
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Need Your Help

How to compress wav file in iOS phonegap app

ios cordova phonegap-build

I my phonegap app (phonegap 3.1.0), I record an audio file in wav format (it's an obligation) but I notice that the bitrate is 44000 (android use 8000 bitrate) so the file is very huge and it's a p...

Monitoring page load event in selected tab from firefox sidebar

javascript firefox xul sidebar firefox-sidebar

I want to be able to run a function in my firefox sidebar js file when the selected tab in the main content window is reloaded or changed. So the sidebar can change depending on the site the user is