Mobile menu

Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #667

    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

    #683
    Livemeshlivemesh
    Keymaster

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

    #690

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

    Joz

    #714
    Livemeshlivemesh
    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 –

    
    
        
    
    
    

    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.

    Enigmatic Responsive menu

    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.

    #718
    Livemeshlivemesh
    Keymaster

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Enigmatic Theme Support’ is closed to new topics and replies.