Mobile menu

[degreesabovezero]

Hi guys, I an trying to create a inline mobile menu rather than the “stacked” one that is in place at the moment. I just want to have a small menu icon to the right (and inline) to the logo for mobile.

Please let me know if this is easy and maybe how to go about it.

Many thanks
Joz

[livemesh]

Will have a look and get back to you in a day or two.

[degreesabovezero]

Thanks for the reply, I’ve figured it with a little custom CSS, but thank you for getting back so quickly 🙂

Joz

[livemesh]

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.

Not too pretty but functions well. If I find time, I will get this styled and release it next week but I cannot say for sure now.

[livemesh]

I forgot a detail. You need to have this code in header.php as well –

 '; ?>

at line 63 or where you find the below code –

Hope this helps. Thanks

[Author]

Posts