tel: +2348055401551 (sms, whatsapp)
skype: tokunboajewole

Wordpress Tutorial - how to move the navigation menu above the header image

After installing Wordpress and publishing a few widgets, the Twenty-Ten theme looks like this:

Figure-1:

replace1a

In this tutorial, we want to move the Navigation menu above the Header image. All we are going to do is just cut and paste.

We need to edit file: header.php.

Steps:

1) Copy file 'header.php' from parent-theme folder(twentyten) into child-theme folder(twentyten-child). How can you create a child theme? Wordpress Tutorial: how to create a child theme.

2) Edit header.php and look for the line of code starting with:

<div id="access" role="navigation">

3) Cut the following text:

<div id="access" role="navigation">
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><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 -->

4) scroll up and paste it right under this line of code:

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

5) save file header.php and refresh your browser.

Twenty-Ten's new look:

navabove

Enjoy!!

Comments   

 
0 #2 newbie 2016-05-21 16:10
Hello!
This worked well, except the menu is now at above and below the image. Please help! :sad:
Quote
 
 
0 #1 newbie 2016-05-21 16:08
Hello.

This worked perfectly, except now the menu is at above and below the image
Quote
 

Add comment


Security code
Refresh

I use Linux 24x7

Recent Comments