WordPress.org

1. daebat
   Member
   Posted 1 year ago #

   I am trying to set up active menu background images but am having some trouble.

   Currently the set up is to have the 'current_page_item' declared at the same level as 'page-item-2' EXAMPLE:

   <li class="page_item page-item-2 current_page_item">
   <a href="page">Page</a>

   and I need for it to be like this:

   <li class="page_item page-item-2">
   <a href="page" class="current_page_item">Page</a>

   Anybody know of a way to do this? I know php somewhat but the core stuff is a little beyond what I can understand. I tried to do a search for the string 'current_page_item' on my entire wordpress install and didn't find anything... so that's odd. Thanks for any help you guys can provide.

2. Chip Bennett
   Member
   Posted 1 year ago #

   What are you trying to accomplish, that you think you need to move the current_page_item class from the list item to the anchor?

   Why can't you just target the anchor like this?
   

   .current_list_item a {
       /* style definitions go here */
   }

3. daebat
   Member
   Posted 1 year ago #

   I'm trying to accomplish background images applied to active menu items. For example... Menu item two is menu_02.jpg. Easy enough with this code:

   ul.sf-menu li.page-item-2 a{
   	background:url(images/menu_02.jpg) 0 0 no-repeat transparent;
   	width:156px;
   	height:43px;
   	text-indent: 9999px;
   	line-height:0;
   	font-size:0;
   }

   Now I'd like for the image to change if active... so the code (provided the current_page_item class was moved below to the link) would work from this CSS:

   ul.sf-menu li.page-item-2 a.current_page_item {
   	background:url(images/menu-active_02.jpg) 0 0 no-repeat transparent;
   	width:156px;
   	height:43px;
   	text-indent: 9999px;
   	line-height:0;
   	font-size:0;
   }

   If I were to use your code it would apply the same background image to ALL of my menu items. The design I was sent does not have web friendly fonts so this is why I am using images instead of text (although the text is there, just indented -9999 px.)

   HERE IS MY PAGE: http://honyat.com/steph/

4. alchymyth
   The Sweeper
   Posted 1 year ago #

   have you tried the logical approach of css:

   ul.sf-menu li.page-item-2.current_page_item a { ... }

5. daebat
   Member
   Posted 1 year ago #

   holy crap! I didn't realize you could combine same level classes like that. Thank you soooooooo much Alchymyth!

6. Chip Bennett
   Member
   Posted 1 year ago #

   Use this for your CSS for list items:
   

   ul.sf-menu li.page-item-2 a{
   	background:url(images/menu_02.jpg) 0 0 no-repeat transparent;
   	width:156px;
   	height:43px;
   	text-indent: 9999px;
   	line-height:0;
   	font-size:0;
   }

   Now, use this declaration for the current list item:
   

   ul.sf-menu li.page-item-2.current_page_item a {
   	background:url(images/menu-active_02.jpg) 0 0 no-repeat transparent;
   	width:156px;
   	height:43px;
   	text-indent: 9999px;
   	line-height:0;
   	font-size:0;
   }

   See how you can stack classes on the same element? The li.page-item-2.current_list_item selector will have higher specificity than the li.page-item-2 selector, and thus will override it.

7. Chip Bennett
   Member
   Posted 1 year ago #

   alchymith beat me to the punch. :)

Topic Closed

This topic has been closed to new replies.