drupal bootstrap theme working with superfish 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
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!