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.
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:
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)
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.
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
Welcome Sathish 😀
Thank you for your nice encouraging comment, yes, i hope twenty ten tutorials in this blog will help other newbies.
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”
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 😉
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
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.
Yes, correct, the word ‘Home’
Great! I will publish the post tonight or tomorrow Hans.
But for your reference, if you have a business website, you may want to put a welcome page in front, and the post page can be called blog. If you are interested on applying this, this post may help: https://www.wpvidz.com/wordpress-change-home-page/
@Hans It is now made in : https://www.wpvidz.com/rename-home-twenty-tens-tab/
Very nice tutorial. You’re my new hero!
Hi Fred,
I am glad it was useful for you.
Thanks for your nice words!
Kind regards,
Kimi.
Another option is to just update the stylesheet:
#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}
Or update the styles…
[code]
#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}
[/code]
^ Nice one Jerry, that worked for me!
thanks man,… i really needed to move the navi bar…
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?