Twenty Eleven is an amazing and popular WordPress theme, I like it very much, and what about you? Have you ever thought about adding a second menu to the theme? What I mean is to add a secondary menu to the top of the page, it is really cool and easy to do so, and I’ll show you how to do it.

Before continuing, in my opinon, I recommend you to create a Twenty Eleven child theme first, you can pick a name whatever you want for the child theme folder. This child theme folder should include the following files:

• a style.css file(create one yourself)
• a functions.php file(create one yourself)
• a header.php file (copy one from Twenty Eleven theme)

First, add the following code to your child theme’s functions.php file to register a second menu named “Top Menu”:

// Add a second menu
register_nav_menus( array(
  'secondary' => __( 'Top Menu (Above the Header)', 'yourtheme'),
  'primary' => __( 'Primary Menu', 'yourtheme' ),
 ) );

Save the functions.php file.
Secondly, in order to display the menu, you need to add some related code to the header in the proper place, so, open header.phpthat you copied from Twenty Eleven and scroll down to around line 73 and find:

<hgroup>
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

Before <hgroup> tag add:

<!-- Begin secondary menu #access2 –>
     <nav id="access2" role="navigation">
	<?php // This is where the menu is added
		wp_nav_menu( array('container_class' => 'menu-top',
		'theme_location' => 'secondary', 'fallback_cb' => '') ); ?>
     </nav><!-- end of #access2 -->

Next, open the style.css file in your child theme folder and add the following code to the top of the file:

/*
Theme Name: You Twenty Eleven child theme name
Theme URI: http://yoursite.com/
Author: Your name
Author URI: http://yoursite.com/
Description: A Twenty Eleven child theme with two menus
Version: 1.0
License:
Tags:
Template: twentyeleven//important
*/
@import url("../twentyeleven/style.css");//important

Finally, below the line @import url(“../twentyeleven/style.css”);//important add the following CSS for the menu and save style.css.

/* The second navigation menu */
#access2 {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 0;
width: 100%;
}
#access2 div { margin: 0 7.6%; }
#access2 ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access2 li {
float: left;
position: relative;
}
#access2 a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}
#access2 ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access2 ul ul ul {
left: 100%;
top: 0;
}
#access2 ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access2 li:hover > a,
#access2 ul ul :hover > a,
#access2 a:focus {
background: #efefef;
}
#access2 li:hover > a,
#access2 a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access2 ul li:hover > ul { display: block; }
#access2 .current_page_item > a,
#access2 .current_page_ancestor > a {
font-weight: bold;
}

Log into your admin, appearance > themes, select your new child theme and check appearance > menus, create and add a new menu to your new menu area.

Source

Related Posts

• How to Change the Height of the Header Image in WordPress Twenty Eleven Theme (0)
• Remove The Header Images Of The Twenty Eleven Theme (0)