Support » Themes and Templates » Used CSS to move my nav menu, now hover effect problem

  • I’m building a site for a friend’s band, and he wanted image buttons instead of text links for the nav menu. First I replaced the text with images, but because of the large amounts of space between them it didn’t look seamless and the last two images were pushed down to the next line. So I used CSS position to force them to go where I wanted. For example:

    li#menu-item-20 a {
      display: block;
      position:relative;
      left:460px;
      top: -126px;
      background-image:url('http://revolt45.com/wp/wp-content/themes/revolt45/images/menu_05.jpg');
      background-repeat: no-repeat;
      width: 181px;
      height: 126px;
      text-indent: -9000px;
    }

    I also wanted to get rid of the default hover effect (where the background turns white), and instead have it show an altered image:

    li#menu-item-20 a:hover {
      background-image:url('http://revolt45.com/wp/wp-content/themes/revolt45/images/menu_05_shift.jpg');
      background-repeat:no-repeat;
    }

    Here’s the website, so you can see how it came out:
    http://revolt45.com/wp/

    The problem I am having is that now when I mouseover the space where the “Calendar” and “Merch” buttons were before I moved them, it somehow activates the old hover effect, and turns those buttons white. Just move your mouse around under the nav menu (especially over the title of the first post) and you’ll see what I mean. Help?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    (@anevins)

    The hovering below the navigation problem seen

    especially over the title of the first post

    Is occurring because you have a position top of -126px on line 73 of style.css.
    The grey is being applied on line 606 to line 614 of style.css.

    OK….

    I know that I have position top: -126px in there, because that’s what makes the images for the nav menu show up in the right place. Is the problem that the other bit comes after it? I’m not sure how to fix that, because I’m working with a child theme, and the grey being applied on line 606 is in the parent theme. And you’re not supposed to actually edit the parent theme, right? :/

    Moderator Andrew Nevins

    (@anevins)

    And you’re not supposed to actually edit the parent theme, right? :/

    Correct.

    You can use the line numbers I stated to refer back to the Parent Theme and use the correct selectors and styles in your Child Theme.

    OK, so, is there anything I can actually do to fix this?

    Moderator Andrew Nevins

    (@anevins)

    Try adding this to your Child Theme

    #access li:hover > a,
    #access a:focus {
     background-color: transparent;
     background: none;
    }
    
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
     background: none;
    }

    That helps a little. It turns grey instead of white. :/

    Moderator Andrew Nevins

    (@anevins)

    I suspect you have many back-up styles assigned in your stylesheet, that have been previously redundant. I suggest working through your Parent Theme stylesheet, looking at any hover styles that are affecting the navigation, then contradicting them in your Child Theme as above.
    In future it’s best to remove redundant code.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Used CSS to move my nav menu, now hover effect problem’ is closed to new replies.