CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
InvalidSyntax
InvalidSyntax

Reputation: 9495

Bootstrap navbar not collapsing

I'm getting started with Bootstrap and its navbars.

I'm trying to get its responsive menu working however its not working as expected. The menu in small windows loads expanded and the menu toggle does not work. I have loaded all the necessary dependancies but something still is not quite right.

Fiddle

HTML:

        <!-- Static navbar -->
           <div class="navbar navbar-inverse navbar-static-top" role="navigation">
             <div class="container">
               <div class="navbar-header">
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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>
                 <a class="navbar-brand" href="#">Project name</a>
               </div>
               <div class="navbar-collapse collapse">
                 <ul class="nav navbar-nav navbar-right">
                   <li><a href="../navbar/">Default</a></li>
                   <li class="active"><a href="./">Static top</a></li>
                   <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                 </ul>
               </div><!--/.nav-collapse -->
             </div>

Upvotes: 1

Views: 4019

Answers (2)

Bernard Doci
Bernard Doci

Reputation: 769

Did you put meta tag in your header, this worked for me.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">.

Upvotes: 2

dbrin
dbrin

Reputation: 15673

Ypu are missing collapse class on the navbar

This list:

            <ul class="nav navbar-nav navbar-right">
               <li><a href="../navbar/">Default</a></li>
               <li class="active"><a href="./">Static top</a></li>
               <li><a href="../navbar-fixed-top/">Fixed top</a></li>
             </ul>

needs to be wrapped in:

      <div class="navbar-collapse collapse">

Also the fiddle you provided has incorrect JS and CSS includes. Take a look at this example here: http://jsfiddle.net/rbd8758f/

Upvotes: 2

Related Questions