Using wp_nav_menu for multiple menus with dynamic highlighting

  • Hey,

    I am using TwentyTen and have created a menu which consists of a few top level pages.

    To display the navigation I am using wp_nav_menu() as shown below:

    <div id="menu" role="navigation">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #menu -->

    For dynamic highlighting and styling I am using CSS and the .current_page_item class:

    #menu {
	float: right;
	color: #fff;
}

#menu ul {
	list-style: none;
	font-family: Otari;
	text-shadow: 0 1px #637bae;
	font-size: 22px;
}

#menu li {
	float: left;
	margin-left: 21px;
	height: 75px;
	text-align: center;
	line-height: 75px;
	min-width: 47px;
}

#menu li:hover {
	float: left;
	margin-left: 21px;
	background: url(images/menu_hover.png) top center no-repeat;
}

#menu li.current_page_item {
	float: left;
	margin-left: 21px;
	background: url(images/menu_hover.png) top center no-repeat;
}

#menu a:link, a:active, a:visited {
	color: #fff;
	text-decoration: none;
}

    All of this is working perfectly on my main navigation. However when I try to duplicate the menu and include it within my websites footer the dynamic highlighting stops working? I have no idea why as the code is exactly the same!

    Any help would be appreciated,

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • DigitalSquid

    (@twelvefootsnowman)

    Using exactly the same code is the problem.

    With CSS, any ID’s should be unique on the page. So you should only ever have one element with the id of ‘menu’
    eg: <div id="menu">

    If you want to have multiple elements with the same styling you should use classes instead as there’s no limit to the amount you can have on the page:
    eg: <div class="menu">

    Thread Starter lewismalpas

    (@lewismalpas)

    Thanks for that, I realised that after a posted. Initially I had different ID’s but removed them to see if exact same code would work, forgetting to change them to classes.

    Despite changing the ID’s to classes the problem still remains, I can’t figure it out because current_page_item works perfectly for the menu in the header and not in the footer (Yet the code is identical).

    For some odd reason two links in the footer are fine and are showing the image above the link when the page is selected, however the remaining four seem to ignore the class.

    DigitalSquid

    (@twelvefootsnowman)

    Post a link to your site so we can have a look at the issues.

    Thread Starter lewismalpas

    (@lewismalpas)

    Im developing it locally – It’s also a client project so I can’t release it to the public without consent. Sorry to be difficult I know you are trying to help…

    I presume its something to do with the wp_nav_menu and the classes it generates? I’ve done some research and I know it creates menu classes (hence why I duplicated my code for the footer).

    Thread Starter lewismalpas

    (@lewismalpas)

    Anyone else know why this may be happening?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Using wp_nav_menu for multiple menus with dynamic highlighting’ is closed to new replies.