php - Nav Menu not Responsive when using Twitter Bootstrap in Drupal

385

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.

624

Answer

Solution:

A couple of thoughts:

1) Are you using Drupal's bootstrap base theme? https://drupal.org/project/bootstrap that might be helpful as you work on this.

2) Have you installed the jquery_update module? https://drupal.org/project/jquery_update The version of jquery that ships with Drupal older then the 1.7 required for bootstrap.

Good Luck!

59

Answer

Solution:

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

Your code must be adjusted to be something like:

<nav role="navigation">
  <div >
    <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
     <span >Toggle navigation</span>
     <span ></span>
     <span ></span>
     <span ></span>
    </button>
  </div>
  <div 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>

People are also looking for solutions to the problem: php - Mysql - conditional insert query with select and PDO

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.