0

I'm using background image to replace menu-items text on my website. I'm using the wordpress menu.

<?php wp_nav_menu( $args ); ?>

it works fine when using text, but then I added some background images to replace text and now links are not working anymore.

here is my css :

#menu-item{width:199px;}
#menu-item-49{background: url('../../../../wp-content/uploads/menu/hit.png');height:29px;width:199px;}
#menu-item-49.active,#menu-item-49.current-menu-item, #menu-item-49.current-post-parent{background: url('../../../../wp-content/uploads/menu/hit_active.png')}
#menu-item-51{background: url('../../../../wp-content/uploads/menu/style.png');height:36px;}
#menu-item-51.active,#menu-item-51.current-menu-item, #menu-item-51.current-post-parent{background: url('../../../../wp-content/uploads/menu/style_active.png')}
#menu-item-50{background: url('../../../../wp-content/uploads/menu/kulture.png');height:38px;}
#menu-item-50.active,#menu-item-50.current-menu-item, #menu-item-50.current-post-parent{background: url('../../../../wp-content/uploads/menu/kulture_active.png')}
#menu-item-48{background: url('../../../../wp-content/uploads/menu/guest_editor.png');height:30px;}
#menu-item-48.active,#menu-item-48.current-menu-item, #menu-item-48.current-post-parent{background: url('../../../../wp-content/uploads/menu/guest_editor_active.png')}
#menu-item-47{background: url('../../../../wp-content/uploads/menu/coulisses.png');height:36px;}
#menu-item-47.active,#menu-item-47.current-menu-item, #menu-item-47.current-post-parent{background: url('../../../../wp-content/uploads/menu/coulisses_active.png')}

so each menu item has its own background image, and changes when the item is active, current or parent, (i'm also using jquery to animate on hover but it has nothing to do with my issue).

here is the html output :

<div class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="/hit-de-la-semaine/">Hit de la semaine</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-51"><a href="/category/style/">Style</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><a href="/category/k-ulture/">K-ulture</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="/category/guest-editor/">Guest Editor</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="/category/coulisses/">Coulisses</a></li>
</ul></div> 

I guess my background image is outside the '<a></a>', but I can't find a solution to fix this... I think there's a simple solution but I'm stucked right now...

anybody can help me this ?

thanks a lot for your help,

1
  • Have you tried playing around with the z-index ?
    – arocketman
    Apr 16, 2014 at 20:19

2 Answers 2

0

Wouldn't you want your link tag outside of the li beginning and ending tags? Then everything inside the LI tag should link including your image:

  <div class="menu-menu-container"><ul id="menu-menu" class="menu"><a href="/hit-de-la- 
  semaine/"> <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-
  object-   category menu-item-49">Hit de la semaine</li></a>
0

This CSS rule isn't referring to anything since you don't seem to have any elements with that ID:

#menu-item{width:199px;}

For your other rules, I'd suggest rewriting them from

#menu-item-49 { .. }
#menu-item-49.active,
#menu-item-49.current-menu-item,
#menu-item-49.current-post-parent { .. }

to

li#menu-item-49 a { .. }
li#menu-item-49.active a,
li#menu-item-49.current-menu-item a, 
li#menu-item-49.current-post-parent a { .. }

Add in display: block to their rules in order to have the <a>'s use the widths you've specified for them in your CSS.


In your $args for wp_nav_menu, add

'link_before' => '<span>', 'link_after' => '</span>'

Then you can "hide" the link's normal text, e.g.

li.menu-item span {
    left: -9999px;
    position: absolute;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.