Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Nav bar help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #188160
    kellyf
    Participant

    I’m updating a site that I manage and have changed the colors of the nav bar + navigation drop down menus. When a link in any of the navigation bar drop down menus is clicked it reverts to the old colors of grey background and black text. For example if you hover over “Classes & Programs” and click “Family to Family” then hover over “Classes & Programs” again, “Family to Family” is grey. I’m trying to make it yellow with white text.

    Can someone please help?
    http://namimultnomah.org/
    This is what I currently have in the CSS:

     /************************************************
    *   Drop down menu's                                   *
    ************************************************/
    
    .menu li li a, .menu .current_page_ancestor li a {
        color: #ffffff;
        background: #498198;
        font-size: 11px;
        padding: 10px 10px 10px 10px;
        border-left: none;
        text-shadow: 1px 1px 1px #000;
        border-top: 1px solid #DDDDDD;
        }
    .menu .current_page_item a, .menu .current-menu-item a, .menu .current_page_ancestor a, .menu .current-cat a {
            background: #498198;
            color: #ffffff !important;
            border: none;
            padding: 10px 10px 10px 10px;
            text-decoration: none;
            line-height: 14px;
            border-radius: 3px 3px 0px 0px;
            -moz-border-radius: 3px 3px 0px 0px;
            -webkit-border-radius: 3px 3px 0px 0px;
    }
    .menu a, .menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color: #ffffff;
            text-shadow: 1px 1px 1px #000;
    }
    .menu li:hover, .menu li.sfHover {
        background: #DEA706;
        color: #ffffff;
        outline: 0;
        border: none;
    text-shadow: none;
        }
    .menu a:focus,.menu a:hover,.menu a:active  {
        background: #DEA706;
        color: #ffffff;
        padding: 10px 10px 10px 10px;
        outline: 0;
            border-radius: 3px 3px 0px 0px;
        -moz-border-radius: 3px 3px 0px 0px;
        -webkit-border-radius: 3px 3px 0px 0px;
        }
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
        background: #DEA706;
        color: #ffffff !important;
        padding: 10px 10px 10px 10px;
        outline: 0;
        border-bottom: none;
        }
    .menu li li:hover, .menu li li.sfHover {
        background: #DEA706;
        outline: 0;
        }
    #188189
    kellyf
    Participant

    Thanks so much! Works great now.

    I agree. Not sure why there are so many !important’s in the original theme. I need to learn how to clean them up.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.