Changing navigation rollover colour?

  • Resolved Geoffrey Bell

    (@geoffrey-bell)


    14 years, 4 months ago

    Can anyone help?

    What should I modify to change the highlighted colour when a mouse is dragged over my navigation menu?

    Here is the coding from my css file…

    /* Masthead */
    #masthead {position: relative; margin: 0;padding:0; float:none; height: 55px}
    #masthead #logo h1 {line-height: 0; margin-top:0px;}
    #masthead #logo h1 a {color:none;}
    #masthead #logo h1 img.sitetitle {margin-top:0px}
    #masthead #logo .description {float:left; margin:1.4em 2em;vertical-align: middle}
    #masthead #search {position: absolute; top: 8px; right:0; }
    #masthead #search #s {border:none;background:none;color:none}
    #masthead #search #s:hover {background:none}

    /* Top navigation overrides */
    #nav-wrap-top {float:right;margin-top:1em;}
    #nav-wrap-top .sf-menu {background:none;float:right;}
    #nav-wrap-top .sf-menu li {background:none;float:right; border-right: 1px dotted; margin:6px 90;}
    #nav-wrap-top .sf-menu li.last {border:#000}
    #nav-wrap-top .sf-menu li a {color:#000; padding: 3px 8px;}

    /* Main navigation overrides */
    #nav-main {height:46px;background:none;margin:0 0 2em 0}
    .home #nav-main {margin:1em 0;}
    #nav-main .sf-menu {margin:0;padding:0;display:block;position:relative;top:0;font-size:12px;width:950px;height:46px;float:none;clear:both; background:none}
    #nav-main .sf-menu li {margin-right:0; background:#none;white-space:nowrap;text-transform:capitalize}
    #nav-main .sf-menu li a {padding:10px 60px 24px 12px; color:none}
    #nav-main .sf-menu li a:hover {color:none;}
    #nav-main .sf-menu li.sfHover ul {top:3.8em;}
    #nav-main .sf-menu li ul li.sfHover ul {top:0em;}
    #nav-main .sf-menu li {border-right: 1px solid none;margin-left:0}
    #nav-main .sf-menu li li {border:none;}
    #nav-main .sf-menu li li li {border:none;}
    #nav-main .sf-menu a {padding:9px;text-decoration:none;}

    /* Footer */
    #footer-wrap {border-top: 1px solid #000; margin: 3em 0 0; padding: 2em 0;}
    #footer div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid none;}
    #footer hr {background:none}
    #footer h3 {margin:.5em 0}
    #footer h3 a {color:none}
    #footer ul li a {border-bottom:1px solid #none; background-image:none; color:none }
    #footer img { margin: 0; }

    /* Archive */
    .archive img {margin:0 1.5em 1.5em 0}
    .archive .content {margin: 2em 0}

    /* Featured */
    #featured {margin: 0 0 4em 0}
    #featured img.attachment-medium {max-width:270px;overflow:hidden;display: inline}

    /*PhotoShelter*/
    #psContainer { width: 990px; text-align: center; margin: 0px auto 10px auto; }
    #psContent { text-align: left; margin: 0 auto; width: 950px; padding: 20px; }
    #psContent H3 { color: #999; }
    #psContent table { width: auto; }
    #PS_GPP_CUSTOM #masthead #logo h1 { margin-top: 26px; }
    #PS_GPP_CUSTOM #masthead #logo h1 a { font-size: 16px; }
    #PS_GPP_CUSTOM #masthead #logo img.sitetitle {margin-top: -26px}

    Many thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Geoffrey Bell

    (@geoffrey-bell)

    BUMP

    Thread Starter Geoffrey Bell

    (@geoffrey-bell)

    BUMP

    Joe

    (@shopping-guide)

    In your css stylesheet nav.css (line 89) you have something like this:

    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #1A1A1A;
outline:0 none;
}

    The portion #1A1A1A is what you want to change to your desired colour.

    Joe

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing navigation rollover colour?’ is closed to new replies.