Navigation Above Twenty Ten’s Header

How to move navigation menu bar of Twenty Ten theme from under to above the header image.

One of my commenter asked, if we can possibly move Twenty Ten navigation menu bar above the header image.

We can do it, however, when you have a drop down menu, part of header’s image will be gone when you hover on the menu.

Video:

So here are the steps to move the menu bar above the image.

The end result.

1. Dashboard, Appearance, Editor.

2. Open header.php file. Copy the code to notepad++

3. Find around line 73, which has this line of code:

<div id="access" role="navigation">
<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->

Image:

From div "access" until the closing div.

Select the code from the beginning until the end of the “div”, and then “Cut”

4. Paste those codes right after the end of the “site-description” div (see image)

Where you will paste the code back.

5. Select all the code and paste the code back in to “header.php”
6. Update the file.

And if you refresh your browser, the navigation bar should be above the image.