Primary Menu to Right Side in Header in WOO Canvas

Default primary navigation under the header.

I removed some of the navigation items as it got too crowded over there in the right. You could also use drop-down menus.

After adding code, navigation now in right side of header.

If you’d like to move down the navigation a bit, you can always add some more CSS such as “margin-top: 25px;” (and maybe also, “margin-bottom: -25px;”) and it will bring down the nav a bit more like the following screenshot.

You can play with the location of the navigation in the header with some CSS margins.

Here’s the code you’ll need for your functions.php file of your child theme. If you don’t have a child theme, you’ll either want to get one or be careful when putting this in your parent (main) theme.

Code for functions.php

add_action( 'init', 'woo_custom_move_navigation', 10 );

function woo_custom_move_navigation () {
    // Remove main nav from the woo_header_after hook
    remove_action( 'woo_header_after','woo_nav', 10 );
    // Add main nav to the woo_header_inside hook
    add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()

 CSS Styling

You’ll need a touch of CSS to keep things in order up there. This goes into your child theme’s style.css file or into Canvas’s custom.css file. I found that if I put it into my child theme’s CSS file, I needed to add the “!important” to the float and width.

@media only screen and (min-width: 768px) {
    #navigation { 
        float: right !important; 
        width: auto !important; 
        clear:none; 
        max-width: 600px; // This can be changed
    }
}
@media only screen and (max-width: 767px) {
    #navigation {
        /*left: -34px !important;*/
    }
}

That should do it! Now you can still customize and style that primary navigation, but it will be in the right part of the header. That wasn’t too hard, was it?