Move the Main Navigation in WooThemes Canvas

For anyone who has worked with me or talked about picking a WordPress theme, they’ll know that I almostย always suggest the Canvas theme from WooThemes.com. With a nice clean slate and a huge selection of user-facing options, Canvas can be modified to fit any need – as shown by the growing variety of Canvas Child Themes. Still, there was something that always bugged me about Canvas – the main Navigation was below the header. This means if you have a large header or only have it on certain pages, the navigation menu can bounce around and it never stays static – I like my menus at the top of the browser, gosh darn it.

daft-1

As expected with Canvas, it’s an easy fix! Just add the following code to your theme’s functions.php file to stick that menu right where it belongs:

And voila! Your site should now look like this:

daft-2

See it in action on the example site: dafttheater.com

Update: February 17, 2015

Thanks to Joe in the comments section below, here’s a bit of modified code to get the “Top Menu” below your “Primary Menu”, which would most likely be an ideal setup. Thanks for the code, Joe! ๐Ÿ™‚

6 thoughts on “Move the Main Navigation in WooThemes Canvas”

  1. Hello Daniel.

    This is exactly what I was looking for. Thank you!

    I’ve tried reducing the padding on the header at the top in order to move that a bit higher with no success. And ideas?

    Reply
  2. Thank you. This is almost what I’m looking for and am sure it is just a case of changing something simple, but how would I place the top menu below the primary menu?

    Reply
    • I managed to get the top menu blow the primary menu by replacing woo_nav with woo_top_navigation and then swapping the remove/add lines.

      However, for some reason, it is still showing the top menu in its original location as well as below the primary menu.

      Reply
      • Sorry about all these messages, but hopefully this will turn up for anybody else looking.

        The fix for this was to have this in the second section:

        remove_action( ‘woo_top’,’woo_top_navigation’, 10 );
        add_action( ‘woo_header_after’,’woo_top_navigation’, 10 );

        Reply

Leave a Comment