0

I have an image linked to a li element from a navbar in wordpress.

All is working fine but when i hover mouse on image, it also shows a menu element hover in the list.

How can i hide that when it is linked to the image?

This is the php code for that (from nav-menu-template.php):

if( $args->theme_location == 'primary' )
return "<li id='menu-item-1000' class='menu-item menu-item-type-post_type menu-item-object-page menu-item-1000'><a class='logo' href='http://razvanwork.esy.es/exelo'><img style='position:absolute;top:-20px;left:-125px;z-index:200;max-width: 402%; ' src='http://razvanwork.esy.es/exelo/wp-content/uploads/2014/02/LogoPrelucrat.png' alt='Exelo' ></a></li>".$items;

I attach an image to show what it is doing: enter image description here

3
  • "This is the php code for that (from nav-menu-template.php):" -- have you hacked a Core file? There is already a close vote on this question, probably as "pure CSS" which was my first thought too. I am not voting to close right now but please add a better explanation of the problem with more detail, including your code.
    – s_ha_dum
    Commented Feb 15, 2014 at 14:28
  • i haven't hacked anythink, man. i don't understand why are you talking like that. close it, do what you want, but with that attitude you're not doing something good. i already put there the code that i added to that file ( nav-menu-template.php ), to add manually something i needed. Commented Feb 15, 2014 at 17:23
  • You misunderstand. nav-menu-template.php is a WordPress Core file. If you have "added to that file", as you say you have, you have hacked a Core file. You should not be editing Core files in any way. I think you need a custom walker. Maybe one of these questions/answer will help: wordpress.stackexchange.com/search?q=user%3A21376+walker
    – s_ha_dum
    Commented Feb 15, 2014 at 17:31

1 Answer 1

0

The class used for your navigation menu's anchor tag has a css selector :hover. Because the image logo has been added withing the anchor tag, it is considered a part of the link and the hover styling affects it as if it were any other link in your nav menu.

Solutions

  • Find another way to add the logo image to your site.

  • Use a different class for this particular anchor tag that is used by the rest of the navigation menu.

  • Add a unique class to this anchor tag and reset the styling for the :hover selector. The most visible styling here is probably the backgound-color property, but refer to your nav menu's :hover styling to determine the properties being used.

1
  • 1
    Thank you Ryan, I managed to fix it by adding position:relative on the a href linked to the image and after that i moved it with left:-10px. Thanks again. :) Commented Feb 15, 2014 at 17:25

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.