Reply To: Mobile menu | Livemesh Support

May 10, 2013 at 10:25 am #714

Keymaster

This is a little involved and you still need to do styling for the list yourself(looks like you have something ready already).

Create a file called menu-mobile.php and paste the following code into it –



    

         'primary',
            'container' => false,
            'menu_class' => 'menu',
            'menu_id' => '',
            'fallback_cb' => false
        )); ?>

Paste the following into js/main.js file –

    /* Hide all list items and open only the top parent next */
    $('#mobile-menu-toggle').click(function () {
        $("#mobile-menu > ul").slideToggle(500);
        return false;
    });

    $("#mobile-menu ul li").each(function () {
        var sub_menu = $(this).find("> ul");
        if (sub_menu.length > 0 && $(this).addClass("has-ul")) {
            $(this).find("> a").append('');
        }
    });
    $('#mobile-menu ul li:has(">ul") > a').click(function () {
        $(this).parent().toggleClass("open");
        $(this).parent().find("> ul").stop(true, true).slideToggle();
        return false;
    });

Also, you will need to disable superfish for this menu by changing line 19 of main.js to –

$('#primary-menu ul.menu').superfish({ ...

from the current –

$('ul.menu').superfish({ ...

Paste the following code into style.css –

/* Mobile Menu */

#responsive-primary-menu { display: none; }
#mobile-menu { display: none; }
#mobile-menu-toggle { display: none; position: absolute; top: 40px; left: 10px; height: 22px; width: 24px; padding: 5px; border: 2px solid #aaa; }
#mobile-menu-toggle i { font-size: 24px; }
#mobile-menu li span i { font-size: 10px; padding-left: 5px; }
@media only screen and (max-width: 767px) {
    #mobile-menu { display: block; position: relative; margin: 0 auto; }
    #mobile-menu > ul { background: #EEE; padding: 15px 0 8px 20px; border-top: 1px solid #DDD; margin: 0; }
    #mobile-menu ul { display: none; list-style: none; text-transform: none; }
    #mobile-menu-toggle { display: block; }
}

Last, paste the following code into header.php at line number 73 –

replaced with

Hopefully you will have everything going now. The menu should look something like this.