WordPress.org

Ready to get started?Download WordPress

Forums

Used CSS to move my nav menu, now hover effect problem (8 posts)

  1. michelleepotter
    Member
    Posted 2 years ago #

    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?

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    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.

  3. michelleepotter
    Member
    Posted 2 years ago #

    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? :/

  4. Andrew
    Forum Moderator
    Posted 2 years ago #

    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.

  5. michelleepotter
    Member
    Posted 2 years ago #

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

  6. Andrew
    Forum Moderator
    Posted 2 years ago #

    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;
    }
  7. michelleepotter
    Member
    Posted 2 years ago #

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

  8. Andrew
    Forum Moderator
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags