Change/Remove Navbar Hover

  • Hi there!

    Just need a little help with site customization. I’m working with a child theme of Twenty Eleven. Here’s a link to my site:

    allielizphotography.com

    I’m using the AnyFont plugin to use my own fonts on the site (works great) but the nature of the hover and active styles of the navigation bar throws it off. It is glitchy and switches between hover and active styles depending on where over the navigation button you hover your mouse, making it impossible to create a nice looking style.

    I think that the easiest thing to do would be to remove the hover style altogether and I will create a new style with the plugin to change only the text color.

    Looking for opinions as well as help with the code on how to remove the hover style if that is the best option. I will leave the issue in place so that others can see what I mean about the glitch hover in the nav bar.

    Help would be greatly appreciated!

    Edit: When looking at the site, try hovering over the actual word, and then moving the mouse down slightly so it’s not touching the text anymore. This should show you the issue.

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

  • Hi there!

    I think I can spot the inconsistency here.

    The grey gradient background transition is activated when you hover over the link (a tag) within the list item (li tag). Your text changing colour, however, happens when you hover over the actual image, which is inside the link but smaller than the link element is. So you can mouse over the link element without actually hovering over the image to prompt that transition.

    I’m not sure how the AnyFont plugin works. The hover doesn’t seem to be changing anything in the CSS, so I assume it’s the plugin doing this with JavaScript – swapping the src of the image element between an image with the text in white and an image with the text in colour.

    It’s a little tricky. The simplest solution I can think of is to remove the padding you have on your link elements in the menu, and add padding to the image itself. Then take the hover CSS you’ve got and apply it to the image element instead, so that when you hover over the image it’s the image that gets the grey gradient background.

    This should allow you to cover the same surface area both with the size of the grey highlighting and where the mouse triggers this change.

    Hope that helps.

    Thread Starter allieliz

    (@allieliz)

    Thanks for the response!

    The things you say definitely make sense- unfortunately I think that’s a little over my head in terms of coding/messing with WP syntax.

    Since I’m using the AnyFont plugin, I don’t know if there’s a way for me to gain access to some of the code that would be necessary.

    I think it might be better to just get rid of that hover event, any advice there?

    OR if anyone could help me with the code side of things as suggested above, that would be great too!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change/Remove Navbar Hover’ is closed to new replies.