WordPress.org

Ready to get started?Download WordPress

Forums

Rollover images in Nav/Menu Bar F8 Theme by GPP (2 posts)

  1. parkerjoe
    Member
    Posted 3 years ago #

    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; }

  2. Sputnik42
    Member
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic