Rollover images do not replace page title in menu

  • https://delfinovineyards.com/wordpress/

    I am coding this without JS. I am almost successful in that the images I’ve created for the menu items show up, and they have a mimicked background to match the menu bar. But the menu text titles won’t go away. I’ve tried z-index et al & nothing seems to work.

    Here’s my code (WordPress 3.8.2 – Harmony Theme): {showing the whole section in case something is out of order}

    #top-menu { float: left; }
    #top-menu ul { display: inline-block; }
    #top-menu a { font-size: 16px; color: #411212; padding: 35px 35px 35px; font-weight: 400; }
    #top-menu > ul > li:first-child > a { padding-left: 0px; background: none;}
    #top-menu ul > li.menu-item a:hover {margin-top: 0px; }
    #top-menu ul > li.menu-item-35 a:hover { background:url(images/delfino_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.menu-item-36 a:hover { background:url(images/wines_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.menu-item-41 a:hover { background:url(images/cottage_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.menu-item-237 a:hover { background:url(images/vineyard_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.menu-item-80 a:hover { background:url(images/events_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.menu-item-33 a:hover { background:url(images/contact_button.png) center top no-repeat!important;
    }
    #top-menu ul > li.current-menu-item > a { font-weight: 600; }

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

  • It looks like the problem is that you’re tying the hover effect to the <a> tag rather than the <li> tag.

    Try instead:

    Hide the text:

    .sfHover a {
visibility: hidden;
}

    Show the hover image:

    #top-menu ul > li.menu-item-35:hover { background:url(images/delfino_button.png) center top no-repeat!important;
}

    Getting excited – I’ve been wrangling this for days!

    Where exactly do I paste the .sfHover command? Each instance or ???

    Lots of thanks!!

    It is partly working. The drop down menu items are hiding now. Ideas?

    It appears I also need to add an href to each image to get it to navigate…

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Rollover images do not replace page title in menu’ is closed to new replies.