wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials Navigation Above Twenty Ten’s Header

Tutorials

Navigation Above Twenty Ten’s Header

Last updated on February 18, 2017
Posted on September 21, 2010

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++

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

menu move navigation to twentyten

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Hide “Posted In Category”
→ Latest Best WordPress Ping List

Comments

  1. Sathish @ TechieMania says

    September 25, 2010 at 3:55 pm

    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

      September 25, 2010 at 5:30 pm

      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

    September 30, 2010 at 1:23 am

    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

      September 30, 2010 at 7:02 am

      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

    October 12, 2010 at 6:57 pm

    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

      October 12, 2010 at 11:16 pm

      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.

  4. Hans says

    October 13, 2010 at 9:01 am

    Yes, correct, the word ‘Home’

    • Kimi says

      October 13, 2010 at 1:28 pm

      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/

  5. Kimi says

    October 13, 2010 at 7:59 pm

    @Hans It is now made in : https://www.wpvidz.com/rename-home-twenty-tens-tab/

  6. Fred says

    February 2, 2011 at 3:46 pm

    Very nice tutorial. You’re my new hero!

    • Kimi says

      February 4, 2011 at 7:02 am

      Hi Fred,

      I am glad it was useful for you.

      Thanks for your nice words!

      Kind regards,

      Kimi.

  7. Jerry Lee says

    May 18, 2011 at 7:22 pm

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

  8. Jerry Lee says

    May 18, 2011 at 7:23 pm

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

  9. James says

    June 8, 2011 at 11:02 am

    ^ Nice one Jerry, that worked for me!

  10. Jaspinder grewal says

    March 2, 2012 at 2:00 pm

    thanks man,… i really needed to move the navi bar…

  11. Mark says

    August 27, 2012 at 9:08 am

    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.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept