Background Image On Active Menu Items

  • daebat

    (@daebat)


    15 years, 1 month 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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Chip Bennett

    (@chipbennett)

    15 years, 1 month 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 */
}

    Thread Starter daebat

    (@daebat)

    15 years, 1 month 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/

    Michael

    (@alchymyth)

    15 years, 1 month ago

    have you tried the logical approach of css:

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

    (@daebat)

    15 years, 1 month ago

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

    Chip Bennett

    (@chipbennett)

    15 years, 1 month 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.

    Chip Bennett

    (@chipbennett)

    15 years, 1 month ago

    alchymith beat me to the punch. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Background Image On Active Menu Items’ is closed to new replies.