WordPress.org

Support

Support » How-To and Troubleshooting » Rollover images in Nav/Menu Bar F8 Theme by GPP

Rollover images in Nav/Menu Bar F8 Theme by GPP

  • parkerjoe
    Member

    @parkerjoe

    Having trouble getting rollover images to work on my menu bar. Got the BG image (wireframe logo, black bg) to show up, and when you pan down to sub-menu items the main tab actually successfully displays the rollover (solid logo, greyish bg), but not when you are on that particular square.

    In case you are not familiar, GraphPaperPress.com themes sometimes work as child/parent themes to eachother, which is the case here “Modularity” > “F8.”

    Perhaps there are cascading styles from Modularity that are affecting the way it works, but I tried the “!important;” command when making the rollovers to no avail.

    Thoughts? Thanks in advance, this is really fun but I’ve hit a wall.

    http://www.membersonly206.com

    Here is the corresponding section of my stylesheet:

    /* NAVIGATION */
    #nav-wrap {height:46px;background:#000;margin:0 0 2em 0}
    .home #nav-wrap {margin:1em 0;}
    .sf-menu {margin:0 0 15px 0;padding:0;display:block;position:relative;top:0;font-size:12px;width:950px;height:46px;float:none;clear:both;z-index:110;}
    .sf-menu li {background-image: url(http://www.membersonly206.com/images/menubg.png); margin-right:0; width:120px}
    .sf-menu li:hover {background-image: url(http://www.membersonly206.com/images/menubgrollover.png); margin-right:0; width:120px}
    .sf-menu li a {padding:18px 0px 16px 42px;}
    .sf-menu li a:hover {color:#fff;}
    .sf-menu li.sfHover ul {top:3.8em;}
    .sf-menu li {border-right: 1px solid #ccc;margin-left:0}
    .sf-menu li.right {border:none; float:left; position:absolute;top:10px; right:10px}
    .sf-menu li li {background-image: url(http://www.membersonly206.com/images/menubg.png); background-repeat:no-repeat; border:none;}
    .sf-menu li li:hover {background-image: url(http://www.membersonly206.com/images/menubgrollover.png); background-repeat:no-repeat; border:none;}
    .sf-menu li li li {border:none;}
    .sf-menu a {padding:9px;text-decoration:none;}
    .sf-menu #search form#searchform input#s {background:#fff;width:140px;}
    .sf-menu .search ul, .sf-menu .search ul li { width: 158px !important; }

Viewing 1 replies (of 1 total)
  • Sputnik42
    Member

    @sputnik42

    Hey,

    I’m not writing because I have an answer to you post, but I noticed you did something with your blog that I’ve been trying to do. How did you get you menu to be above the header image? I can’t seem to find the menu position anywhere.

Viewing 1 replies (of 1 total)
  • The topic ‘Rollover images in Nav/Menu Bar F8 Theme by GPP’ is closed to new replies.