If you want to add a second line of menus with a separate style to the wordpress twentyten theme, you can follow this recipe.
1. Back up all your files. This is critical especially if you don’t have editing access to your code outside of word-press as you can get your theme and site royally screwed up.
2. Login to the control panel. Open the Theme Functions File called functions.php. Change
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
'twentyten' ),
) );
to
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
'secondary' => __( 'Secondary Navigation', 'twentyten' ),
) );
3). Click on Appearance and then click on MENUS. You will be able to add a new menu. After you have created your new menu select it as the secondary menu in the Theme locations.
4). In the header.php file:
Find the following lines of code:
Right below this code add.
5). Editor your stylesheet to add the styling for the menu-header2 class and the access2 division. Here is my code which I placed in a child theme:
/* The Second Header */
.menu-header2
{
margin: 0 auto;
width: 940px;
font-size: 13px;
margin-left: 12px;
width: 928px;
}
.menu-header2 ul {
list-style: none;
margin: 0;
}
.menu-header2 li {
float: left;
position: relative;
}
/* =Menu
-------------------------------------------------------------- */
#access2 {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
//height: 18px;
}
#access2 .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access2 .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access2 .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access2 a {
color: light blue;
display: block;
line-height: 28px;
padding: 0 10px;
text-decoration: none;
}
#access2 ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access2 ul ul li {
min-width: 180px;
}
#access2 ul ul ul {
left: 100%;
top: 0;
}
#access2 ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access2 li:hover > a,
#access2 ul ul :hover > a {
background: #333;
color: #fff;
}
#access2 ul li:hover > ul {
display: block;
}
#access2 ul li.current_page_item > a,
#access2 ul li.current-menu-ancestor > a,
#access2 ul li.current-menu-item > a,
#access2 ul li.current-menu-parent > a {
color: #fff;
}
* html #access2 ul li.current_page_item a,
* html #access2 ul li.current-menu-ancestor a,
* html #access2 ul li.current-menu-item a,
* html #access2 ul li.current-menu-parent a,
* html #access2 ul li a:hover {
color: #fff;
}
That should do it. Let me know if you run into any problems. Note: Since I have edited the function.php and header.php files directly, these will break if you update wordpress.
Related posts:
- How to create custom sidebars for specific pages in your site.
- Check out the WP Random Header Plugin
- How to go from 4 to 3 footer widgets in the WP TwentyTen Theme
- What the Stats screen on LifeSize Connections means
- Civility and Civil Public Discourse: Mediation Skills Citizens Can Use
- Civility and Civil Discourse
- Load-Balancing Switches: Bad for Video Conferencing
- Mid-Missouri Broadband Access and Use
- VCS Starter Pack, the Missing Step
- Checklist: Basic VCS Expressway Security
- Revolabs Mics: Fixing the “Garbled” audio problem.
- Radvision Interop: from desktop to telepresence.
- Installing short-throw Projectors in rooms with low ceilings.
- Mid-Mo Broadband Access Results
- The easiest and most reliable way to make RS232 and other wired connections
