WordPress.org

Ready to get started?Download WordPress

Forums

Background Image On Active Menu Items (7 posts)

  1. daebat
    Member
    Posted 3 years 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
    Theme Review Admin
    Posted 3 years 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 3 years 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
    Forum Moderator
    Posted 3 years ago #

    have you tried the logical approach of css:

    ul.sf-menu li.page-item-2.current_page_item a { ... }
  5. daebat
    Member
    Posted 3 years ago #

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

  6. Chip Bennett
    Theme Review Admin
    Posted 3 years 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
    Theme Review Admin
    Posted 3 years ago #

    alchymith beat me to the punch. :)

Topic Closed

This topic has been closed to new replies.

About this Topic