CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapmobiledrop-down-menu
Phorden
Phorden

Reputation: 1034

Bootstrap 3 Mobile Menu Collapse Not Working

I am working with the Bootstrap 3 framework to build a responsive site. I am having issues getting the collapse functionality to work on the mobile screen. I know it is not related to my phone and implementation because I can not get it to work when I shrink the browser window either. The {module} tag is a dynamic generated navigation that is generated in ul list form.

HTML:

<div class="navbar navbar-fixed-top navbar-inverse hidden-md hidden-lg">
     <div class="container">
         <div>
            <h3 class="pull-left" style="color:#fff;">Bemidji Sculpture Walk</h3>
         </div>
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle"collapse" data-target=".navbar-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
       </div>
       <div class="navbar-collapse collapse">    
          {module_menu,1328069}
       </div>
    </div>
</div>

jQuery:

$(document).ready(function(){
    $('#nav_1328069').addClass('nav');
    $('#nav_1328069').addClass('dropdown');
    $('#nav_1328069').addClass('navbar-nav');
    $('#nav_1328069 li.selected').addClass('active');
});
</script>

URL of the site: http://sculpturewalk.designangler.com/

Upvotes: 2

Views: 8598

Answers (1)

Adrift
Adrift

Reputation: 59769

You forgot to include an = for the data-toggle attribute on the <button> - instead use:

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Upvotes: 2

Related Questions