Make Mind-blowing Mobile Menus for WooThemes Canvas – new Canvas Extension

Make Mind-blowing Mobile Menus for WooThemes Canvas - new Canvas Extension 2

mobile-menu-manager-5-designs

[box type=”tick”]Purchase Mobile Menu Manager now from the PootlePress store and get the settings for these 5 beautifully simple menus included[/box]

More and more of your traffic is coming from mobile devices. So why leave your mobile menu the way it comes with Canvas – plain and boring?

The reason most people leave it this way, is that they either can’t be bothered with tackling all the CSS involved – or don’t know how. We think this is a shame. Just thinking of all the Canvas sites out there on the web with the same mobile menu makes us sad :(

So… it’s time to spice it up a bit! ;) Mobile Menu Manager allows you to style the standard Canvas mobile menu without complex CSS. With tons and tons of options, no two mobile menus have to look the same. Now, you can pretty much create any look you want… in minutes, rather than hours.

Here’s a video walk-through…

1. Introduction

2. Mobile NavBar settings

3. Mobile Menu Panel settings

4. Mobile Options and mobile search

As usual, let us know what you think in the comments below!

[box type=”tick”]Purchase Mobile Menu Manager now from the PootlePress store and get 5 beautifully simple menus included[/box]

17 thoughts on “Make Mind-blowing Mobile Menus for WooThemes Canvas – new Canvas Extension”

  1. This looks like a great plugin. The default canvas mobile menu is horrible.

    I like that you can change the navigation text to branding. However, you should include a setting that removes the main header branding if chosen.

    Having branding in both areas is redundant and the main header takes up a decent chunk of vertical space.

  2. I’ve been having a go with this and I have to say it’s great! thanks.

    The only thing, and it might be me, but it doesn’t seem to be changing the background colour on a parent item when it’s child is selected. In my case I have set the background to black on all menu items, but when a child of one of the two parent items in the menu is selected, the background stays a light grey. is that a little bug? or perhaps I have missed something in the settings (definitely a possibility!).

    Overall though, really great, just what I’ve been wanting for a while. well done.

        1. Hi Kelly,

          If you change ‘Menu item background color when page selected’ in the Mobile Menu Panel options to black it should solve this.

          I’ve also emailed you back through our support system.

          Thanks – Nick

  3. Congrats on the new plugin. Looks very cool.

    I’ve been wanting to work on our mobile site. I have a friend that uses Canvas and loves http://www.dudamobile.com/. What are you thoughts on your new plugin vs. Dudamobile?

    I like the idea of being able to manage which pages show up on mobile, etc… Like you said, it’s nice to have less choices and more simplification on mobile devices.

    I like your plugin, just not sure if it allows for enough customization and also, maybe it’s not wise to install it if I am thinking of using a mobile service like dudamobile as well. All thoughts welcome.

    1. Thanks Sue!!

      Some thoughts on Duda mobile. First of all it costs $9 a month (if you don’t want ads on your mobile site – and you don’t!). That’s $324 over 3 years when you already have Canvas (add $19 for Mobile Menu Manager). Also – I like having everything managed through one system. I just like to keep things neat. Ok, I can see that it offers a lot more layouts and options than Canvas in mobile, so if there is a feature that really makes you think it will make a difference and it’s worth $300 – then go for it! But overall, I would say it’s aimed at people that don’t already have responsiveness as an option – and Canvas = responsive.

      I’m interested if there is a specific option that your friend uses Duda mobile for, because if there is, we would love to do a Canvas Extension for it! If so – post it on our ideas board here: https://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas

  4. Hi Nick, is it possible to display the phone number at the top of the menu? If so I’ll get it.
    If not can I suggest that change? Along with the ability to have a small logo. Most people want to instantly call if using a mobile.
    I’m after this layout similar to this http://www.sheerblissspa.com/ which we built in DNN but I want it in WP for Canvas.

    1. Hi Toby, I can see already from feedback from Mobile Menu Manager that a logo as part of the navbar and top of the menu panel is desirable. So we have already marked that for an upgrade. In terms of the phone number – one way of doing this in the short term is to give your menu name your mobile number. Not ideal, but a workable short term hack.

      I have added both of these as options to our ideas board – so please vote!

      Thanks so much for your input Toby!

      https://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas/suggestions/5824597-ability-to-have-logo-on-mobile-menu-panel-and-mobi

      https://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas/suggestions/5824592-phone-number-option-on-mobile-menu-manager

  5. Hi Nick,

    I’ve been adding mobile numbers into the primary navigation on Canvas using the hooks and some CSS. Might be a quick fix for you. Here’s the code:

    #phonebutton {
    width: 30%;
    height: 45px;
    background-color: #A6CF53;
    float: right;
    padding: 1px 10px;
    }

    #phonebutton a.phone {
    color: #ffffff;
    font-family: Lato;
    font-size: 25px;
    font-weight: bold;
    display: block;
    text-align: center;
    padding-top: 10px;}

    /* RESPONSIVE MEDIA CHANGES */
    /* change responsive design to allow for menu reposition and phone number */
    @media only screen and (max-width: 767px) {
    #phonebutton {
    float: none;
    width: auto;
    height: auto;
    }

    .quotes {
    display: none;
    }
    }

    /* change responsive design for portrait tablet for menu reposition and phone number */
    @media only screen and (min-width:768px) and (max-width:790px) {
    #phonebutton {
    width: 28%;
    }

    #phonebutton a.phone {
    font-size: 21px;
    }
    }

    and here’s the HTML to put in the hook : Call 1.555.555.5555

    Cheers,

    JK

  6. Hello,

    I’m looking for a solution to completely remove the mobile navigation menu and the horizontal band that displays the site name. Does your plugin allow that?

    Thanks by advance for your reply.

Leave a Comment

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