It’s actually very easy to achieve this. You will just need to activate the styles that make the sub menus collapsible on small screens for all screen widths – i.e. you will need to remove the media query part (but keep the inner rules) in the theme “.css” file.
For example, for the default theme “sm-blue.css” look at the end at the “Responsiveness” section at the end of the file – you have the following media queries:
/* decrease horizontal main menu items left/right padding to avoid wrapping */
@media screen and (max-width: 850px) {
.sm-blue:not(.sm-blue-vertical) > li > a {
padding-left:18px;
padding-right:18px;
}
}
@media screen and (max-width: 750px) {
.sm-blue:not(.sm-blue-vertical) > li > a {
padding-left:10px;
padding-right:10px;
}
}
@media screen and (max-width: 640px) {
[ KEEP JUST THESE RULES ]
}
You basically need to delete all these and just leave the rules inside the last media query and this will make your sub menus collapsible for all users (desktop and mobile).
Now the only remaining thing is that the sub menus will expand onclick even on desktop since the script has some code which enables onclick activation when collapsible sub menus are detected. You can fix this by using the following additional JS code:
$('#main-menu').bind('mouseenter.smapi', function(e, item) {
$('#main-menu').smartmenus('itemClick', { currentTarget: item });
});
But I believe once you test this live, you will prefer the expand/collapse onclick rather than onmouseover.
Please let me know if you have any questions.
