WordPress.org

1. kaallyn
   Member
   Posted 2 years ago #

   Hi,
   I'm having trouble getting indicating the current page on this website: http://www.mattallyn.com. I can get the current_page_item class to work, if the nav were text-based. But it's not working when I try to apply it to the sprite image CSS code I use for the nav. Any thoughts?

   Here's the header.php nav:
   

   <ul id= "navigation">
   
       <li id="navigation-1"<?php if ( is_home() || is_single() || is_search()  ) { echo ' class="current_page_item"'; } ?>>   <a href="<?php echo get_settings('home'); ?>" title="Click for Home">blog</a></li>
        <li id="navigation-2"<?php if ( is_page('2')) { echo ' class="current_page_item"'; } ?>><a href="/?page_id=2">about</a></li>
        <li id="navigation-3"<?php if ( is_category('7')) { echo ' class="current_page_item"'; } ?>><a href="/?cat=7">portfolio</a></li>
        <li id="navigation-4"<?php if ( is_page('9'))  { echo ' class="current_page_item"'; } ?>><a href="?page_id=9">contact</a></li>
   
   </ul>

   Here's the CSS:

   ul#navigation {
   		width:450px; /*413*/
   		list-style:none;
   		height:38px;
   		margin-left:-2px; /*0px, was 103*/
   		margin-top: -1px;
   		float:left;
   }
   
   ul#navigation li {
   	display:inline
   }
   
   ul#navigation li a {
   	height:38px;
   	float:left;
   	text-indent:-9999px;
   	text-decoration:none
   }
   
   ul#navigation  li a span {
   	float:left;
   	display:block
   }
   
   ul#navigation li#navigation-1 a {
   	width:83px;
   	background:url(images/Matthew-nav2.jpg) no-repeat 0px 0
   }
   
   ul#navigation li#navigation-1 a:active,
   ul#navigation li#navigation-1 a:hover {
   	background-position:0px -38px
   }
   ul#navigation li#navigation-1 .current_page_item {
   	background-position:0px -76px;
   	background-color: yellow;
   }
   
   ul#navigation li#navigation-2 a:link {
   	width:96px;
   	background:url(images/Matthew-nav2.jpg) no-repeat -83px 0;
   }
   
   ul#navigation li#navigation-2 a:active,
   ul#navigation li#navigation-2 a:hover {
   	background-position:-83px -38px
   }
   ul#navigation li#navigation-2 .current_page_item {
   	background-position:-83px -76px
   }
   
   ul#navigation li#navigation-3 a {
   	width:122px;
   	background:url(images/Matthew-nav2.jpg) no-repeat -179px 0
   }
   
   ul#navigation li#navigation-3 a:active,
   ul#navigation li#navigation-3 a:hover {
   	background-position:-179px -38px
   }
   ul#navigation li#navigation-3 .current_page_item {
   	background-position:-179px -76px
   }
   
   ul#navigation li#navigation-4 a {
   	width:113px;
   	background:url(images/Matthew-nav2.jpg) no-repeat -301px 0
   }
   
   ul#navigation li#navigation-4 a:active,
   ul#navigation li#navigation-4 a:hover {
   	background-position:-301px -38px
   }
   ul#navigation li#navigation-4 .current_page_item {
   	background-position:-301px -76px
   }

   Any help would be very much appreciated! Thanks much.

2. Andrei Olsen
   Member
   Posted 2 years ago #

   Move class="current_page_item" inside an anchor tag:
   <li id="navigation-4"><a <?php if ( is_page('9')) { echo ' class="current_page_item"'; } ?> href="?page_id=9">contact</a></li>

   and replace .current_page_item with a.current_page_item:
   

   ul#navigation li#navigation-4 a.current_page_item {
   	background-position:-301px -76px
   }

3. kaallyn
   Member
   Posted 2 years ago #

   That worked perfectly. Thank you so much! Nebulus, you are my hero.

Topic Closed

This topic has been closed to new replies.