Eliminate Conflicts Between Superfish and Meanmenu CSS

by Dan Burhans | Sep 13, 2014

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.

Please note, for this tutorial locate your menu

and

tags.

<header>
	<nav>

<ul class="sf-menu">

 	<li>...</li>


 	<li>...</li>

</ul>

	</nav>
</header>

The reasons for this will become apparent as you work through the tutorial.

Step 2. Set up Meanmenu in your web page as documented here.

Step 3. Test your setup by resizing the width of your browser to 480px or below. You’ll see Meanmenu does not look like the Meanmenu developer’s demo. Instead, you’ll see something like this:

Superfish conflicting with Meanmenu styles

The “drawer” style drop downs are overlapping each other and the color scheme has been altered. The Superfish CSS and JavaScript are interfering with the Meanmenu styling and function. The solution to this problem is to re-target the Superfish CSS style declerations to eliminate this interference.

Step 4. Remove “sf-menu” class from

<header>
	<nav>

<ul class="sf-menu">

 	<li>...</li>


 	<li>...</li>

</ul>

	</nav>
</header>

Becomes this:

<header>
	<nav>

<ul>

 	<li>...</li>


 	<li>...</li>

</ul>

	</nav>
</header>

Step 5. Declerations from the superfish.css that previously targeted “.sf-menu” now need to target

.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

Becomes this:

header nav ul, header nav ul * {
	margin: 0;
	padding: 0;
	list-style: none;
}

All refrences to the class “.sf-menu” in superfish.css need to be changed to “header nav ul”. Try running a find and replace in your text editor.

Now Meanmenu should be functioning more like the demo, however, re-targeting these declerations has broken the Superfish menu dropdown rendering!

Step 6. Add this to superfish.css to fix Superfish rendering:

header nav ul ul li { 
width: 100%;
float: left;
display: block;
line-height: 1em;
}

Step 6. If you followed the Superfish Quick Start Guide you’re calling Superfish with the following:

<script>// <![CDATA[
        jQuery(document).ready(function() {
                jQuery('ul.sf-menu').superfish();
        });
// ]]></script>

You’ll want to target the new containg elements like so:

<script>// <![CDATA[
        jQuery(document).ready(function() {
                jQuery('header nav ul').superfish();
        });
// ]]></script>

Step 7. You’ll notice the Superfish arrows are showing faintly in Meanmenu, you have the option of shutting them off with the following:

<script>// <![CDATA[
	jQuery(document).ready(function() {
		jQuery('header nav ul').superfish({
			cssArrows:  false
		});
	});
// ]]></script>

Step 8. Finally, you may notice that in Meanmenu the area around the plus signs that show the submenu items when clicked don’t line up with the top level menu items. Look for the following decleration block in meanmenu.css and adjust the height value:

.mean-container .mean-nav ul li a.mean-expand {
	margin-top: 1px;
	width: 26px;
	height: 32px; /* Adjust height of expander (+) button area */
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

6 Comments

Richard Baker on January 31, 2015 at 3:55 pm

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;
}
Reply
- Dan Burhans on January 31, 2015 at 4:35 pm
  
  Thanks for sharing your findings. Glad you found this post useful.
  Reply
Wamala Phil on February 16, 2015 at 5:04 pm

I’ve followed the steps but the desktop superfish menu has instead been broken. ie the dropdown now doesnt work.
Reply
- Dan Burhans on February 18, 2015 at 3:17 pm
  
  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.
  Reply
Greg on April 25, 2020 at 12:09 pm

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
Reply
- Dan Burhans on April 27, 2020 at 12:54 pm
  
  Thanks for you’re input, Greg. Your advice may well come in handy for someone.
  Reply

Eliminate Conflicts Between Superfish and Meanmenu CSS

Categories

Archives

6 Comments

Submit a Comment Cancel reply