Since WOO Canvas version 5.0, the theme has been responsive. (What the heck is responsive?) Great, works really well, looks great on different sized screens, thanks WOO!

[box type=”info”]Update Feb 2013: WOO adds new checkbox right there in the theme: remove responsive design! WOOT for WOO![/box]

But web designer kind of guy that I am, I’m going to tweak, edit, alter, update, fix, and change certain elements of the design. If I don’t change too much, structurally, the responsive design should remain intact, but if I start going overboard, I might “break” some of those responsive features. At some point, with certain sites, it was just easier to turn off all responsive behavior and let the site look how it look on all devices.

Pre-version 5.0.10, that took some tinkering and even then it didn’t work all that well. Now with WOO Canvas version 5.0.10, they have just a simple bit of CSS code to insert and voilà: responsive design is gone.  Thanks WOO!

Here’s the code you need:

@import url(css/layout.css); .col-full, #wrapper { max-width: 960px; width: 960px; } #top select { display: none !important; }

Insert the @import rule at the very top of the custom.css file, otherwise it will not work. You’ll need to change the 960px if you have changed the width of your site in the options panel (e.g. 940 or 1080).

In case you were wondering, my main gripe was how the design treated the Top Navigation. It turned it into a drop-down menu that looked out of place and wasn’t very easy to use (especially on a phone).

Responsive WOO Canvas Top Nav

Update: Since Canvas 5.0.13, there’s an even easier update, just a big of code into your Canvas or Canvas child theme functions.php file:

add_action( 'init', 'woo_load_responsive_design_removal' );