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 <ul> inside HTML5 <header> and <nav> 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 <menu><ul> so that this:

<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 <header><nav><ul>. So, for example, this:

.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;
}
Eliminate Conflicts Between Superfish and Meanmenu CSS
Share this:
FacebookTwitterLinkedInGoogle+Email

4 thoughts on “Eliminate Conflicts Between Superfish and Meanmenu CSS

  • January 31, 2015 at 3:55 pm
    Permalink

    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
    • January 31, 2015 at 4:35 pm
      Permalink

      Thanks for sharing your findings. Glad you found this post useful.

      Reply
  • February 16, 2015 at 5:04 pm
    Permalink

    I’ve followed the steps but the desktop superfish menu has instead been broken. ie the dropdown now doesnt work.

    Reply
    • February 18, 2015 at 3:17 pm
      Permalink

      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

Leave a Reply

Your email address will not be published. Required fields are marked *