Nav Menu not Responsive when using Twitter Bootstrap in Drupal

Question

I am currently working on a website project based on Drupal 7 where initially the static html templates were made using Bootstrap.

I have now converted these into page templates on Drupal; in the static templates, the responsive navigation works, but after having plugged them into Drupal, they no longer work.

I have told the .info file to point to the appropriate js and css files, but can't figure out why, as soon as I moved the site across to the CMS, this function stopped working.

The project is here.

Any help is highly appreciated.

Muhammad Reda Muhammad Reda · Accepted Answer · 2014-01-26T08:21:32

I took a look at your code, you didn't add required Bootstrap markup that triggers the display of the navigation bar toggle and the navigation links default view between different screen sizes.

Your code must be adjusted to be something like:

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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" id="bs-example-navbar-collapse-1">
          <?php
          print theme('links__system_main_menu', array(
              'links'       => $main_menu,
              'heading'     => null,
              'attributes'  => array(
                  'class'   => array('nav navbar-nav'),
              ),
          ));
          ?>
    </div>
</nav>

Nav Menu not Responsive when using Twitter Bootstrap in Drupal

2 Answers