Bootstrap responsive navbar not collapsing

html css twitter-bootstrap responsive-design navbar

26,282

Here's the Jsfiddle I created for you - http://jsfiddle.net/shail/F4NfT/10/ Working !

<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>

    <div class="navbar">
<div class="navbar-inner">
<div class="container">

<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>

<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

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

26,282

Author by

Msencenb

Updated on July 16, 2020

Comments

Msencenb almost 4 years

Ok so I'm taking this almost directly off of the docs and nothing seems to be working (I'm actually now ripping their html directly instead of just the example).

First my head section, where the 'template' files are my custom files:

<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/assets/responsive_template/css/bootstrap.css" rel="stylesheet">
<link href="/assets/responsive_template/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/responsive_template/css/template.css" rel="stylesheet">

<script src="/assets/responsive_template/js/jquery.js"></script>
<script src="/assets/responsive_template/js/jquery-ui-1.10.0.min.js"></script>
<script src="/assets/responsive_template/js/bootstrap.js"></script>
<script src="/assets/responsive_template/js/template.js"></script>
</head>

Now the actual navbar section:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Prototype</a>
            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li><a id="back-button" href="#">Back</a></li>
                    <li><a id="submit-button" href="#">Submit</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

However running this nothing collapses... it just takes up three whole lines up top on my iPhone. I'm not seeing any errors via chrome console when its below 940px either... any thoughts?

Msencenb about 11 years

Hmm I still can't get this locally working but even in this fiddle the dropdown itself isn't working jsfiddle.net/SQLP4
Shail about 11 years

Friend , I didnt inserted the menu items ... updated it with menu items ... check again its working
Msencenb about 11 years

Thanks, I noticed from your fiddle that you were using 2.3.0... it seems that i had a copy of bootstrap 2.2.0 and was trying to use 2.3.0 syntax!
v3nt about 10 years

adding 'nav-collapse collapse' just seems to hide the nav for me? (bootstrap 3)