Eliminate Conflicts Between Superfish and Meanmenu CSS

by | 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

    inside HTML5

    and

FacebookTwitterLinkedInEmail

6 Comments

  1. Richard Baker

    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

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

      Reply
  2. Wamala Phil

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

    Reply
    • Dan Burhans

      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
  3. Greg

    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

      Thanks for you’re input, Greg. Your advice may well come in handy for someone.

      Reply

Submit a Comment

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