Out of the box Superfish CSS and JavaScript interfere with Meanmenu styling. This tutorial will help you get around that. I will use the basic demo files included in the Superfish download to demonstrate.
Step 1. set up Superfish in your web page as documented here in the “Quick Start Guide”. Use the basic superfish.css included in the Superfish download.
Another approach would be to enable/disable Superfish with javascript on init and window resize… and drop all the meanmenu/superfish styles into media queries.
I.e
Javascript:
$( window ).resize( function(){
if($(‘body’).width() >= breakpoint && !$(‘header nav ul’).hasClass(‘sf-js-enabled’)) {
// you only want SuperFish to be re-enabled once (sf.hasClass)
$(‘nav .menu’).superfish(‘init’);
} else if($(‘body’).width() < breakpoint) {
// smaller screen, disable SuperFish
$('nav .menu').superfish('destroy');
}
});
Do this same check on document.ready as well
CSS:
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
Add all Superfish styles here
}
Set MeanMenu to enable at 767 in the meanmenu config and you're all set
Thanks for this, it was a big help.
I found this worked for hiding the arrow as well.
.mean-bar .sf-arrows .sf-with-ul:after {
display: none;
}
Thanks for sharing your findings. Glad you found this post useful.
I’ve followed the steps but the desktop superfish menu has instead been broken. ie the dropdown now doesnt work.
Phil, can you link me to your site? Also, check CB Solar with Firebug extension for a production example of the topics covered in this tutorial.
Another approach would be to enable/disable Superfish with javascript on init and window resize… and drop all the meanmenu/superfish styles into media queries.
I.e
Javascript:
$( window ).resize( function(){
if($(‘body’).width() >= breakpoint && !$(‘header nav ul’).hasClass(‘sf-js-enabled’)) {
// you only want SuperFish to be re-enabled once (sf.hasClass)
$(‘nav .menu’).superfish(‘init’);
} else if($(‘body’).width() < breakpoint) {
// smaller screen, disable SuperFish
$('nav .menu').superfish('destroy');
}
});
Do this same check on document.ready as well
CSS:
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
Add all Superfish styles here
}
Set MeanMenu to enable at 767 in the meanmenu config and you're all set
Thanks for you’re input, Greg. Your advice may well come in handy for someone.