Support » Themes and Templates » Fix highlight in navigation menu

  • Resolved animeshtripathi



    I’m using CSS to highlight a menu button on hover. Pretty simple. But it isn’t highlighting the entire button. Some part on the left is left out. Here’s the website.

    The CSS I’m using:

    #navigation > ul > li > a:hover {
    background: url('images/nav-active.png') repeat-x top left;
    padding-left: 10px;
    height: 41px;
    line-height: 41px;
    text-decoration: none;

    Can you tell me what is the problem here? I’m sure it’s an easy fix, but I can’t get it.


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


    Forum Moderator

    there is a 10px left padding on this style; change it to:

    #navigation li + li {padding-left: 4px;}

    Thanks! Never looked into the li+li part, I had a li+li style set for the separators, editing the padding-left on that and removing the 10px padding in the a:hover worked fine 🙂

    Thankyou for helping me for the 3rd time, alchymyth! Owe you one. (three).

    btw, I posted two more issues on this forum, could you check those as well, please?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fix highlight in navigation menu’ is closed to new replies.