Hi,
OK, I saw you already have your menu tree #menu styled for desktop view so basically you will just need to add some responsive styles to make sure it is transformed to a collapsible menu on small screens. You can find out how to do this by looking here:
http://www.smartmenus.org/docs/#small-screen-support
You will probably also need to tweak the look of your menu in collapsible mode by adding some additional rules inside the media query to override your existing desktop styles.
The other things are:
1) You will not need the following CSS at all since you already have styled your menu tree:
<!-- SmartMenus core CSS (required) -->
<!-- SmartMenus core CSS (required) -->
<!-- #main-menu config - instance specific stuff not covered in the theme -->
#main-menu {
position:relative;
z-index:9999;
width:auto;
}
#main-menu ul {
width:12em; /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
}
2) Of course, you will need to switch from your current script to actually using the SmartMenus plugin for your menu tree. You currently have just linked the script but even your init code:
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
does not target #menu but #main-menu (the menu tree id on the default demos).
Finally, please note that the CSS work might turn out to be a bit tricky since I am not familiar with your existing CSS code but hopefully it won’t be a big trouble for you.
Hope this helps.
.
