If you want to get the primary navigation up into the header, here’s some easy code to do it.

I personally find the right side of most headers in websites an empty wasteland. Sometimes there’s an address and phone number or maybe some social media buttons, but often it’s wasted. Why not move that top navigation down or the primary navigation up into the header area?

[box type=”note”]This works best if your navigation is less than 5 or so links. [/box]

Default primary navigation under the header.

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.

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.

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?

[box type=”note”]Looking to get rid of that little extra padding on the right? See #9 on the CSS Tweaks post: Remove right side padding/margin in main navigation.[/box]