wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog Tutorials Navigation Above Twenty Ten’s Header

Tutorials

Navigation Above Twenty Ten’s Header

Last updated on
Posted on

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.

Latest Posts

Comments

  1. Sathish @ TechieMania says

    Hi Kimi, This is my first visit to your blog and I am impressed. You are doing an amazing work.

    Thanks for this Twenty Tutorial. It would be helpful for the newbies.

    Sathish

    • Kimi says

      Welcome Sathish 😀

      Thank you for your nice encouraging comment, yes, i hope twenty ten tutorials in this blog will help other newbies.

  2. shashank chinchli says

    i endedup doing the same on my blog 🙂
    N yea ur last line of blog made me think twicebefore doing so !

    Lines are “I and My blog ……r website or you”

    • Kimi says

      Hey Shashank,

      Yes, if you’re not sure it will work with your site, best is to install wp locally and try it local first then apply it online.

      Thank you for coming by 😉

  3. Hans says

    Hello, Hans here,

    My question is: (How) Can the homepage get the textname of the header of the page? Or is this not possible?

    Thanks for the great info

    Hans

    • Kimi says

      Hello Hans,

      Do you mean changing the “Home” wording on the top navigation to something else? if yes, it is in function.php, i will make a tutorial in the next days.

      I hope it will help.

  7. Jerry Lee says

    Another option is to just update the stylesheet:
    #header #access{
    top: -240px;
    position: relative;
    }
    #site-title {
    margin:0 0 44px;
    }

  8. Jerry Lee says

    Or update the styles…
    [code]
    #header #access{
    top: -240px;
    position: relative;
    }
    #site-title {
    margin:0 0 44px;
    }
    [/code]

  11. Mark says

    Hi,

    Kimi,

    I tried your way and there is a gap between the links and the image now, did I do something wrong?

    Jerry I tried yours and there was no change, did I not do something correct as you said?

Comment form on this post is closed after 60 days.