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

—

by

Nick Burne
in , , , ,

Purchase Mobile Menu Manager now from the PootlePress store and get the settings for these 5 beautifully simple menus included

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!

Purchase Mobile Menu Manager now from the PootlePress store and get 5 beautifully simple menus included

Comments

18 responses to “Make Mind-blowing Mobile Menus for WooThemes Canvas – new Canvas Extension”

  1. Matt Avatar
    Matt

    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.

    Reply
    1. Nick Burne Avatar
      Nick Burne

      Agreed Matt! We already have Page Element Hider (https://www.pootlepress.com/shop/page-element-hider-woothemes-canvas/), so either giving that a mobile option or having an option to remove logo/site title so it’s not duplicated twice…

      The other idea I can see is have the ability to put a small logo inside the mobile navbar. I will put these ideas as possible enhancements for the next version of the mobile menu manager.

      Thanks for your input!

      Reply
  2. david Avatar
    david

    Thanks for this guys, it will really speed up customizing the mobile nav feature of Canvas. Cheers!

    Reply
    1. Nick Burne Avatar
      Nick Burne

      Glad you like it David!

      Reply
  3. Kelly Burchell Avatar
    Kelly Burchell

    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.

    Reply
    1. Nick Burne Avatar
      Nick Burne

      Hi Kelly,

      We’re on this and will provide a fix ASAP if this is a bug issue. Can you email support@pootlepress.com so we have a log of the issue with you and you can make sure we get back to you with an update?

      Thanks!

      Nick

      Reply
      1. Kelly Burchell Avatar
        Kelly Burchell

        That’s brilliant, thanks. I’ve emailed you just now.

        Reply
        1. Nick Burne Avatar
          Nick Burne

          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

          Reply
  4. Sue Avatar
    Sue

    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.

    Reply
    1. Nick Burne Avatar
      Nick Burne

      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

      Reply
  5. Toby Avatar
    Toby

    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.

    Reply
    1. Nick Burne Avatar
      Nick Burne

      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

      Reply
  6. jordan keats Avatar
    jordan keats

    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

    Reply
    1. Nick Burne Avatar
      Nick Burne

      Thanks for sharing Jordan! And for the idea on the ideas board.

      See it in action here: http://gourmetgirlslocalkitchen.com/

      Would be great to have in v2 of Mobile Menu Manager!

      Reply
  7. Jason Avatar
    Jason

    Hi Nick, is there a way to make the mobile nav bar sticky? Thanks!

    Reply
  8. Nick Burne Avatar
    Nick Burne

    Hi Jason,

    We have been working on a solution with the Canvas responsive menu. However we have not been able to find a solution that works the way we would like, without causing issues. So at the moment, the short answer is ‘no’.

    Great question though… Maybe chalk up some demand on the ideas board?

    http://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas

    Reply
  9. Laurent Avatar
    Laurent

    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.

    Reply
  10. A Step-by-Step Guide to Leveraging Google’s Mobile-First Index

    […] Do you have a specific mobile menu designed? […]

    Reply

Leave a Reply

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