Canvas v5.2 – Full width layout and new mobile menu

Written by Magnus Jepson on April 16, 2013 Product news.

Sometimes a theme update deserves a blog post to highlight new features. This is such a time and we think you’ll love the new additions to Canvas, our flagship theme.

Full Width Layout Option

A much used tutorial in our knowledge base was how to make the header, navigation and footer full width. We’ve now added this as an option to Canvas so everyone can use this type of layout.


Mobile Navigation

We’ve updated our mobile navigation to be even more awesome than before, as it slides in from the left when you click the Navigation toggle.

canvas-mobile

Other features and fixes

We’ve also updated Canvas with HTML5 tags in the template files, updated icons to use FontAwesome, spam protection in contact form, tweaked code and tweaked options, in addition to bug fixes from the bugs reported by users.

We’ve tested the new features in Canvas extensively. If you find issues or need help updating, please contact us via our Help Desk.

If you have ideas on how we can further improve Canvas, be sure to post your idea in our Ideas Board.
cta-banner-10-product-page-v2_2x

64 Responses

  1. Laurent Matignon
    April 16, 2013 at 10:44 am #

    To be honest I was quite disappointed about mobile navigation… Until now: this update rocks!

  2. SarahS
    April 16, 2013 at 11:35 am #

    That’s great news, almost all the sites I use Canvas for have had full width headers and footers.

  3. WpDown
    April 16, 2013 at 12:03 pm #

    Amazing updates, really like new features

  4. Conor
    April 16, 2013 at 12:11 pm #

    Do you know if other themes will get similar upgrades (Mystile for instance)?

    • Magnus
      April 16, 2013 at 12:27 pm #

      Which updates specifically?

      • Conor
        April 16, 2013 at 4:38 pm #

        Spam protection for contact form without 3rd party plugins

        • Magnus
          April 17, 2013 at 3:29 pm #

          Yes that is the plan if it works well in Canvas.

  5. Christian
    April 16, 2013 at 12:28 pm #

    II was doing research all night about this theme and all of the sudden I just see this new update….

    I am defiantly going to buy it now.

  6. Lex
    April 16, 2013 at 1:53 pm #

    I just tested the demo for the new version of Canvas on a Galaxy SII smartphone and the left menu is “unscrollable”: as soon as you try to scroll down the menu, it collapses/shuts and the content takes place… not the way I expected it to behave. My blog has fewer options in the menu and this problem won’t appear, but you might take a look at it. Tested with the default browser in Android 4.0 and with Firefox (not the latest versions though).

    • Christopher
      April 16, 2013 at 2:12 pm #

      Yeah, it’s funny because the full menu on the demo isn’t accessible now so you wouldn’t even know it offered shortcodes.

    • Magnus
      April 16, 2013 at 2:16 pm #

      This issue was fixed in Canvas 5.2.1 which is available in your dashboard.

      The demo just needs to be updated too, which we’ll do later today πŸ™‚

    • webjump
      April 16, 2013 at 2:54 pm #

      Yes, same on iPhone but Woothemes informed me that a fix is en route today (hopefully)

      • karenjsx
        April 16, 2013 at 5:34 pm #

        Very glad to see this. I had downloaded Canvas fresh on Sunday, which had the new 5.2 code, and the nav on my iPhone is wonky (well, completely un-nav’able..). As usual, I assumed it was me. I was just getting ready to post a help ticket. πŸ™‚

        BTW – 5.2.1 is not available yet in my Dash..hoping to see it soon. Thank you. Canvas (and you guys) rock.

        • Magnus
          April 16, 2013 at 6:12 pm #

          5.2.2 is available in all dashboards, so be sure to clear your browser cache.

          Replace includes/js/general.js with this updated file for the mobile nav fix: https://gist.github.com/mjepson/5397252

          • karenjsx
            April 16, 2013 at 9:34 pm #

            5.2.2 installed & All is Well! Looks smashing, and thanks again!

          • jacekiciek
            April 18, 2013 at 7:53 pm #

            Clearing cache did not help for me. Any other ideas? I do not want to re-install it manually so as not to lose current settings… I’m not using a child theme…

        • jacekiciek
          April 18, 2013 at 7:51 pm #

          I have cleared the cache and the history and still the new update does not appear in the dashboard:/ Any ideas?

  7. Christian
    April 16, 2013 at 2:31 pm #

    Is plain and simple people, Websites cannot just be made by just clicking around!!!

    This template is for the Web Developer that wants to create awesome websites in less time or for the beginner to learn how to code websites.

  8. Dale Wright
    April 16, 2013 at 2:47 pm #

    I use Canvas almost exlusively and adding the full width header, navigation and footer option will save me ton of time.

    All I need now is an option to make business template slider full width and you will have saved me me about 30 mins from each Canvas install πŸ™‚

    I love nothing more than admiting a pretty themes on other marketplaces and then developing them on the tried-and-tested Canvas framework πŸ™‚

    Keep up the great work!

  9. Scanlaser
    April 16, 2013 at 3:07 pm #

    One thing I have noticed on our website. The mobile menu looks really good on Safari on iOS, but doesnΒ΄t work on Google Chrome on iOS.

    Otherwise, a great update!

    • tmeise
      April 16, 2013 at 5:32 pm #

      Really? On my iPhone my menu doesn’t work neither in Safari nor in Chrome. Every tap leads directly to a link from the menu, not to the menu itself.

      • karenjsx
        April 16, 2013 at 5:39 pm #

        Me too. On iOS 6.1 I can’t get it to work on either Chrome or Safari. Clicking on any of the slideout menu just causes the same page to slide back in from the right. No nav’ing can be done by that mobile menu at all!

    • Magnus
      April 16, 2013 at 6:11 pm #

      We did add a fix for this in the latest update, but you can replace your includes/js/general.js with this to fix it: https://gist.github.com/mjepson/5397252

  10. Buratinas
    April 16, 2013 at 3:49 pm #

    Small mistake:
    http://i.imgur.com/it7rdhG.png

    Other languages don`t have -th, -rd or -st suffixes:
    http://i.imgur.com/lxDvKd4.png

  11. Ronald
    April 16, 2013 at 4:47 pm #

    That is really coolll !!
    Thx very much, and now: it’s play time!

  12. Silencer
    April 16, 2013 at 10:34 pm #

    Hi,
    I like the new mobile navigation as well as the fixes to the expanded menu (no more overlap when resizing) & the business slider (no more horizontal scroll bar in mobile view).

    There are still some glitches (tested in FF20 on Windows when resizing the browser window):

    1. the horizontal scroll bar appears between 990px to 750px width (before the mobile version kicks in)

    2. the business slider navigation arrows get reduced too much; they are hard to hit on a smartphone display + the left arrow gets cut off little bit (maybe the arrows should be on top of the slider instead on the left/right)

    3. There are inconsistencies with the styling of the main expanded navigation menu (a good practice example for me is Whitelight): a main entry should be highlighted when hovering on it (correct in canvas) but not change its style when hovering down to a subentry (in canvas the text changes from bold to regular hovering to a different main entry & then to its subentries) + the style changes from grey to white background when doing that in the already selected main entry)

    Anyway, thanx for your great ongoing work on Canvas!

    • Magnus
      April 17, 2013 at 10:06 am #

      Be sure to report those to our help desk πŸ™‚

  13. Justin
    April 16, 2013 at 11:10 pm #

    Nice work on the full width layout

    Noticed the cart icon in the in the nav bar is just showing the shopping cart and previous version it showed how many items and $ amount …Am I missing something

    • Magnus
      April 17, 2013 at 10:04 am #

      It’s an option now, so you have more flexibility. Our demo has it enabled.

  14. MayaPapaya
    April 17, 2013 at 1:12 am #

    Glad to see the new mobile navigation toggle, but there are still some uses where the previous slide-down navigation makes better sense (i.e. when you only have a few menu items).

    I’d prefer to see a select box option in Theme options for users to choose either left slide or top slide nav.

    • Magnus
      April 17, 2013 at 10:05 am #

      I’m afraid we can only have one menu, and this is a better overall solution.

  15. renegadesk
    April 17, 2013 at 5:42 am #

    Great updates cause I always use full width header and footer and manually add FontAwesome to this works perfect for me! Keen to try out the new mobile menu too. Looks great in the screenys

  16. PosAbilities
    April 17, 2013 at 9:27 am #

    Love the new full width header and footer.

  17. Nikole Gipps
    April 17, 2013 at 5:30 pm #

    Awesome!

  18. Piotr
    April 17, 2013 at 5:43 pm #

    You can return to the previous menu with Canvas 5.1?

    • Magnus
      April 17, 2013 at 5:50 pm #

      I’m afraid that isn’t possible.

  19. trcwebapps
    April 17, 2013 at 11:00 pm #

    I think I heard somewhere that BuddyPress Canvas was discontinued.

    Would that be why I can’t find it for download in the Dashboard anymore?

    I can’t seem to find the official announcement, can you direct me to it?

    • MayaPapaya
      April 18, 2013 at 4:07 am #

      BuddyPress 1.7 now features theme compatibility so you can run BP on any theme without needing modifications.

  20. thaisold
    April 17, 2013 at 11:41 pm #

    I bought this theme yesterday on theme forest looks like I didn’t get the updated one

    • Magnus
      April 18, 2013 at 9:24 am #

      If you register your purchase as explained in the e-mail you got, you’ll have access to the theme on our site.

  21. Susan
    April 18, 2013 at 6:26 pm #

    Hi, when will I be able to update to 5.2 in WordPress? Thanks!

  22. RonStrilaeff
    April 18, 2013 at 7:17 pm #

    I have two questions (maybe 3, but they are easy) :

    1. Does this “full width ” feature include the main content area or does this apply only to the header, and footer backgrounds? More specifically, I see the the content of the header, nav menus, main content area, footer widgets and footer are all constrained by this option: “Styling & Layout” -> “General Layout” -> “Site Width” (slide control).

    2. If the “Site Width” value really is the max width for my site content, then is there a stable way to configure it be truly full width like this site http://pinterest.com/all/?category=architecture … where the content always takes the full width of the viewport?

    3. I noticed that this Canvas documentation page http://woocommerce.com/products/canvas/ says (under “Advanced layout controls) says I can set the site width from 600px to 2000px but on my site, the slider is limited to 1600px. Did you guys find a problem with 2000px width? If I could use that, I would be happy since the biggest common monitor is 1920px wide. That would cover all my bases since Canvas does so well on the small devices too.

    Thanks, Ron

  23. thanasislb
    April 19, 2013 at 10:24 pm #

    Upgraded to Canvas 5.2 love the new features and the new mobile navigation.

    There is a problem with some embedded YouTube Videos. They appear as a black screen. It seems this only happens with Firefox… Anyone else noticed that?

    Thank you

    Thanasis

  24. TR_theme576
    April 20, 2013 at 4:48 am #

    I have the same problem with the black screen effect for embedded YouTube videos mentioned by thanasislb above And yes it seems to only happen with the Firefox browser.

    TDR

  25. drewmcmanusllc
    April 20, 2013 at 6:04 pm #

    Hi Guys, the update looks great but after trying to apply it to two separate Canvas installs (one multisite, the other a single install), both sites were plagued with a great deal of errors, so many in fact I had to resort back to the previous version of Canvas. One of the biggest issues was the new responsive slide form the side menu appearing in Chrome desktop browsers at max window width.

    Do you have a major debugging release scheduled and on the books with a specific release date yet?

    • aglozier
      April 20, 2013 at 6:41 pm #

      I upgraded from 5.1.4 to 5.2.2 last night. The performance of the new mobile menu on my Samsung Galaxy S3 is unacceptable. I have to tap the menu multiple times to get it to appear. This occurs with the stock android browser, Chrome and Dolphin. It is even somewhat erratic in Chrome on my PC.

      In addition I use a plugin called CiviCRM (http://civicrm.org/). On web pages generated by CiviCRM (donation, registration, etc) the mobile menu doesn’t appear at all. It has problems with 5.1.4 but at least the menu it partially appears.

      Because of these issues, I reverted back to 5.1.4.

      • orgspring
        April 28, 2013 at 6:13 pm #

        I use S3 as well, and both canvas, and fresh canvas work like a charm.
        sorry you’re having difficulties.
        Did you check other plugins/options that might be kicking you?

        • aglozier
          May 2, 2013 at 10:59 am #

          I did some more testing and observed that you have to touch the top edge of the mobile navigation bar to trigger it. With 5.1 you could touch the word “Navigation” or the symbol next to it. I wish that touching anywhere on the navigation bar would trigger it.

          I tested it on my desktop computer with IE, Chrome and Firefox in a narrow window to simulate a mobile device. I hovered my mouse over the navigation bar to see where the active areas were. Only the top portion of the navigation bar is active. I would think that the whole bar should be. Also the word “Navigation” and the symbol were active in IE but not in CHrome and FoxFire.

          When I get around to it I’ll report this as a bug.

          • aglozier
            May 2, 2013 at 1:32 pm #

            I did some further testing using a test website on my production server with a fresh install of WordPress, Canvas 5.2.3 and the CiviCRM plugin. The test site didn’t have any of the problems I mentioned in my previous posts.

            On a copy of my website on a different server, I disabled all my plugins, deleted custom CSS and removed all my widgets. It still had the problems I mention in my previous posts.

            Any ideas on what is wrong? The upgrade theme procedure I use is to rename the old Canvas Theme directory and to install the new version in new Canvas directory.

          • aglozier
            May 2, 2013 at 1:59 pm #

            I did more testing. I backed up my Canvas settings of my website and applies them to my clean test site. This caused the problems with the mobile navigation to occur.

            I conclude that some Canvas customization setting I made is effecting the mobile navigation. I’ve made many changes so it will be tough to find the one that causes it.

          • aglozier
            May 2, 2013 at 2:52 pm #

            It’s the “Header Padding Bottom” setting. Values less than 25 pixels eat into the active area of the mobile navigation bar. The smaller the value the smaller the portion of the bar that responses to touch. A setting of 0 pixels breaks the navigation bar completely.

            Some other unknown setting prevents mobile navigation bar from appearing with CiviCRM.

  26. Andrea
    April 24, 2013 at 3:15 am #

    I only have one website that I do myself and so I apologize in advance for the dumb question, but…does this new update allow for a full-width background? As in a photo that would be scaled depending on what platform it’s viewed on? Right now, the backgrounds have to be tiled or repeated.

    • Andrea
      April 29, 2013 at 3:40 am #

      Am I on the pay-me-no-mind list or something? Or should I ask my question somewhere else?

      • workpowermedia
        May 13, 2013 at 9:27 am #

        You can declare this using css.

  27. orgspring
    April 28, 2013 at 6:11 pm #

    Fantastic updates. Mobile nav is great, and one button full width saves a ton of css time.
    This theme is so versatile. Love it for most of my clients.
    Really nice work.

  28. Franko
    April 29, 2013 at 12:38 pm #

    – New Update for Canvas
    – reached 10.000 Facebook Likes
    – reached 450.000 Community Members

    What about a Coupon for Canvas ? =)=)=)

  29. Enwil (@manishsuwal)
    May 13, 2013 at 11:36 am #

    Why did you guys remove the tumblog in this new update? Is it because we can download the plugin?

    And if I use tumblog, will the RSS pause? I don’t want to send e-mail newsletter to my subscribers when I just post a link or an image. My e-mail campaign is RSS driven.

    Thank you.

  30. twright
    May 16, 2013 at 6:52 pm #

    Updating Canvas theme is a nightmare. Suggestion to use “Easy Theme and Plugin Upgrades” yields “same folder name” error, no help. Why close the comments on “How to update theme to new version”. No specific documentation on how to update if using a child-theme. I find the entire support system and response completely watered-down. Very unhappy.

  31. twright.vitalogics
    May 17, 2013 at 5:08 pm #

    FYI – change log link – does not anchor to a list of changes.

    http://docs.woocommerce.com/document/canvas/#Changelog

  32. newbieguy
    June 3, 2013 at 5:59 pm #

    does anyone know how to make the logo responsive when you include toplinks to the right of it so they don’t collide?

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: