1

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

  • isn't it easier to just use the navigation menu provided by bootstrap instead of using superfish ? – Jayaram Mar 27 '13 at 14:51
  • Thank you Jayaram, but I am a little bit confused now, what is 'navigation menu provided by bootstrap' in Drupal? Do you mean the 'navigation' under 'Administration > menu > Navigation'? How can I make it show submenus when mouse hovering the menu items then? – the_summer_bee Mar 27 '13 at 15:06
  • superfish does not use responsive css. I would suggest using dropdowns and Navbar or Nav components from bootstrap to customize the menu styling instead of using superfish. did you do this already ? – Jayaram Mar 27 '13 at 15:18
  • Hi, how can I do this in drupal? do I just add the relevant html into page.tpl.php? Sorry if this is a silly question, I am quite new to drupal... Thanks – the_summer_bee Mar 27 '13 at 15:43
2

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

superfish custom css

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!

  • Hi Jayaram, sorry for later reply, i was interrupted by another project. This works for me! Thank you so much! – the_summer_bee Apr 4 '13 at 14:40
0

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

  • thanks, but I am using superfish-7.x-1.8 as I said. – the_summer_bee Mar 27 '13 at 17:20
  • 7.x-1.8 is not 7.x-1.x-dev 7.x-1.8 was last updated 2011-Mar-27 and the dev was last updated 2013-Feb-08 – Brandon Bearden Mar 27 '13 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.