drupal bootstrap theme working with superfish

Question

I hope this will not be too confusing, apology if it is

My situation:

1. I used superfish so that I can have a navigation menu with dropdown submenu when the mouse hovering the nav items.

2. I used bootstrap theme to make the whole site responsive

3. I use 'main menu' instead of 'navigation' as my navigation menu bar

4. I customised the menu style by changing 'default.css' in superfish, bootstrap.css and style.css in bootstrap theme.

5. I have unchecked main menu in appearance tab under the theme setting so that the main menu will not show up twice while I'm using superfish.

6. I am using drupal 7, superfish-7.x-1.8 and bootstrap-7.x-2.x-dev

When the screen size is reduced, the menu bar disappears and the small button in the corner will show up. When clicking this button, the main menu items should be shown as a drop down menu. My problem is: because I unchecked the main menu, the main menu items will not show up when clicking this small button. But the superfish menu (which is main menu, but set in superfish menu) will be there without changing style for small screen. How can I make the superfish menu items behave the same way as normal main menu + bootstrap?

I really don't know how to explain this more clearly and I am really frustrated by bootstrap theme now :(

Any help would be very much appreciated!

thx

Answer 1

Superfish allows you to add custom css classes to the menu items. If you prefer to do it that way

you might want to first select the classes from bootstrap that you want to use to style your superfish menu items. Second add those classes correspondingly in the superfish menu block settings(click configure next to the block).

I also added a html wrapper under advanced HTML settings around the main UL element which is simply , (comma denotes the beginning and ending wrapping elements).

Let me know if that helps!

Answer 2

This is from the http://drupal.org/project/superfish webpage:

Important notes:

v1.9-beta5 is stable enough to be used on production sites. You can use it with the Superfish library v1.2-beta2. The latest development release (Feb 8) should be used if you're starting a new site that requires a responsive (or small-screen compatible) navigation. It requires the latest Superfish library (click the ZIP button in the Github or click this link). If you're upgrading you must add the path to sfsmallscreen.js plugin manually (which should be sites/all/libraries/superfish/sfsmallscreen.js) by going to Superfish module configuration page (admin/user-interface/superfish) and adding the full path at the end of the list of the library files.

Have you tried that? I would try 7.x-1.x-dev