Active class not showing

  • Hi, I’ve been working on this issue for longer that I want to admit. I simply want to have the hover and active state be the same on the main nav bar. Here’s my code.

    /**** Main Menu ****/

    #sidebar ul.navlist {
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 268px;
    font-size: 16px;
    }

    #sidebar ul.navlist li {
    display: inline;
    line-height: 0px;/* fix the unwanted gap between li elements in FF */
    }

    #sidebar ul.navlist li a {
    display: block;
    height: 30px;
    line-height: 30px;
    color: white;
    padding: 2px 2px 2px 24px;
    text-decoration: none;
    border-top: 1px solid #705A52;
    border-bottom: 1px solid #3E322D;
    }

    #sidebar ul.navlist a:hover, #sidebar ul.navlist current_page_item a{
    color: #877065;
    background-color: #443833;
    border-bottom: 1px solid #3E322D;
    }

    #sidebar ul.navlist li a.noborder, #sidebar ul.navlist li a:hover.noborder {
    border-bottom: none;
    }

    /*Sub pages in main nav*/

    #sidebar ul.navlist ul ul li a{
    margin-left:20px;
    display:block;
    border:none
    }

    #sidebar ul.navlist ul ul li a:hover {
    border:none
    }

    #sidebar ul.navlist ul ul li a.noborder, #sidebar ul.navlist ul ul li a:hover.noborder {
    border-bottom: none;
    }

    /*Sub sub pages in main nav*/
    #sidebar ul.navlist ul ul ul li a{
    display:block;
    margin-left:40px;
    border:none
    }

    The hover state works fine but not the active where I’m using the current_page_item class. Help!!! (and thanks)

Viewing 1 replies (of 1 total)
  • Thread Starter christina.helen

    (@christinahelen)

    Thanks to the BFA Forum I was able to find an answer to my problem. I am posting my code because I know it will help someone else down the line who is having a hard time getting active classes to work properly with the Flexi Pages widget.

    /**** Main Menu ****/

    #sidebar ul.navlist {
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 268px;
    font-size: 16px;
    }

    #sidebar ul.navlist li {
    display: inline;
    line-height: 0px;/* fix the unwanted gap between li elements in FF */
    }

    #sidebar ul.navlist li a{
    display: block;
    height: 30px;
    line-height: 30px;
    color: white;
    padding: 2px 2px 2px 24px;
    text-decoration: none;
    border-top: 1px solid #705A52;
    border-bottom: 1px solid #3E322D;
    }

    /* DEFAULT */
    #sidebar ul.navlist li.current_page_item a:link,
    #sidebar ul.navlist li.current_page_item a:visited {
    color: #877065 !important;
    background-color: #443833 !important;
    border-bottom: 1px solid #3E322D !important;
    }

    /* For HOVER */
    #sidebar ul.navlist li.current_page_item a:active,
    #sidebar ul.navlist li.current_page_item a:hover {
    color: #877065 !important;
    background-color: #443833 !important;
    }

    /* For CURRENT */
    #sidebar ul.navlist li.current_page_item a:link,
    #sidebar ul.navlist li.current_page_item a:visited
    #sidebar ul.navlist li.current_page_item a:active,
    #sidebar ul.navlist li.current_page_item a:hover,
    #sidebar ul.navlist li a:hover {
    color: #877065 !important;
    background-color: #443833 !important;
    }

    #sidebar ul.navlist li a.noborder, #sidebar ul.navlist li a:hover.noborder {
    border-bottom: none;
    }

    /* Reset children of CURRENT */
    #sidebar ul.navlist li.current_page_item ul li a:link,
    #sidebar ul.navlist li.current_page_item ul li a:visited {
    color: #d5d3d2 !important;
    background-color: #56453E !important;
    border: none !important;
    }

    #sidebar ul.navlist li.current_page_item ul li a:active,
    #sidebar ul.navlist li.current_page_item ul li a:hover {
    color: #fff !important;
    background-color: #56453E !important;
    border: none !important;
    }

    /*Sub pages in main nav*/

    #sidebar ul.navlist ul ul li a{
    margin-left:20px;
    display:block;
    border:none
    }

    #sidebar ul.navlist ul ul li a:hover {
    border:none
    }

    #sidebar ul.navlist ul ul li a.noborder, #sidebar ul.navlist ul ul li a:hover.noborder {
    border-bottom: none;
    }

    #sidebar ul.navlist li.current_page_item ul ul li a:link,
    #sidebar ul.navlist li.current_page_item ul ul li a:visited {
    color: #d5d3d2 !important;
    background-color: #56453E !important;
    border: none !important;
    }

    #sidebar ul.navlist li.current_page_item ul ul li a:active,
    #sidebar ul.navlist li.current_page_item ul ul li a:hover {
    color: #fff !important;
    background-color: #56453E !important;
    border: none !important;
    }

    /*Sub sub pages in main nav*/
    #sidebar ul.navlist ul ul ul li a{
    display:block;
    margin-left:40px;
    border:none
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Active class not showing’ is closed to new replies.