Add Second Menu to Twenty Eleven Theme

Adding a secondary menu to Twenty Eleven theme is really easy. This feature is available in my NomNom Child Theme and I’ll show you how I did it. We’ll be doing this by making a child theme and creating 3 files.
secondary menu twenty eleven theme
Create a folder and pick a name for your theme.
Create a style.css file
Create a functions.php file
Copy header.php from Twenty Eleven theme and add it to your theme folder.

Upload everything to wp-content/themes, all files should be inside your new theme folder.
We will start off by adding the function to create a new menu. Open functions.php and add this to it.

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

Save and close functions.php. This bit of code registers a second menu.
Next we need to add the code to the header in the proper place to display the menu, so open header.php that you copied from Twenty Eleven and around line 76 find

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

Below this line 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 -->

Save and close header.php. This is basically a copy of the primary navigation code with the ID access2 used instead of just access. We’ve also used fallback_cb which as it says on the codex “Given a theme_location parameter, the function displays the menu assigned to that location, or nothing if no such location exists or no menu is assigned to it. ” This will prevent the new menu from listing pages as most people will not want the top and bottom menus to show the same menu items. If we create a menu and add items to it, it will display them, otherwise it will not appear.

The last thing for us to do is style the menu, so open your style.css file. Since we’re creating a child theme add this top the top of the file.

/*
Theme Name: My Menu Theme
Theme URI: YourThemePage.com
Author: Your Name
Author URI: YourSite.com
Description: A Twenty Eleven child theme secondary menu 
Version: 1.0
License: GNU General Public License
Tags: dark, light, white, black, custom-header, custom-menu
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

This tells WordPress that this is a child theme of Twenty Eleven. You’ll probably want to select a different name and URL for yourself.

Now below that add the CSS below for the menu and save style.css. This is basically the same CSS the original menu uses, but using our new #access2 ID.

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.

/*------------------------------------------------
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;
}

62 thoughts on “Add Second Menu to Twenty Eleven Theme

  1. Ana

    Oops. Sorry. Figured it out. Thank you. This is great! I would also be interested in how to move the placement of the secondary nav under the primary nav and make it less tall.

    Reply
    1. Zeaks

      Post author

      It’s hard to tell without see the issue outside a screenshot, but it doesn’t look like you’ve added the #access2 CSS.

      Reply
      1. Erin

        Thanks for your reply. I activated the second menu and refreshed the page (duh) and it showed up with the proper css styles BUT it looks like I have hidden it behind the header somehow… I’m pretty sure that’s the problem. I guess I just need to sort through the css until I find what I did…

      2. Zeaks

        Post author

        If you need me to take a look and don’t want to post your site here, feel free to use the contact form at the top of this page.

  2. Pingback:

    Rex » How to add 2nd menu in twenty eleven theme

  3. Andre Perez

    Hello. Thank you so much for this! The menus look great but when I plugged it in, the image in my head moved over so that now there is only white between the top and bottom menu and the header image i to the right of both menus. What did I do? and How do I fix the placement of the header image?

    Reply
  4. Pingback:

    How to add 2nd menu in twenty eleven theme | REx

  5. Clive Hetherington

    Hi Zeaks, thanks for this page. I’m trying to get the second menu to work at the very, very top of the page. I can get it placed there but it’s not responsive as a menu. Menu items don’t respond to being clicked and sub menu’s don’t open. I’d appreciate any help thanks.

    Reply
  6. Steph

    Hello! Would you be able to provide instructions on how to place the second menu in the footer instead of the header? I tried to figure it out on my own, and I got the menu to display, but I’m not able to control it from the Menus tool in my dashboard admin. It’s just pulling in all my pages.
    Thanks so much!
    I’ve done this on two sites:
    http://www.glitterandgoatcheese.com/
    and
    http://eldestonly.com/

    Reply

Leave a Reply