I hope this will not be too confusing, apology if it is
My situation:
I used superfish so that I can have a navigation menu with dropdown submenu when the mouse hovering the nav items.
I used bootstrap theme to make the whole site responsive
I use 'main menu' instead of 'navigation' as my navigation menu bar
I customised the menu style by changing 'default.css' in superfish, bootstrap.css and style.css in bootstrap theme.
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.
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