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! 🙂


Have any questions or comments about this article, or ways you think it can be improved?
Join the conversation in the comments below, or sign up for my newsletter to recieve periodic updates!

Tags: , , , , , ,

6 Responses to “Move the Main Navigation in WooThemes Canvas”

  1. John December 9, 2014 at 21:54 EDT (9:54 PM) #

    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?

  2. Joe February 15, 2015 at 07:14 EDT (7:14 AM) #

    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?

    • Joe February 15, 2015 at 07:32 EDT (7:32 AM) #

      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.

      • Joe February 15, 2015 at 07:36 EDT (7:36 AM) #

        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 );

        • Danny Santoro February 17, 2015 at 12:29 EDT (12:29 PM) #

          Good addition, Joe! Thanks for that – I’ll actually add it at the bottom in case anyone else has the same question. 🙂

          • Joe February 17, 2015 at 12:33 EDT (12:33 PM) #

            Hopefully it will help 🙂

Leave a Reply

%d bloggers like this: