Twenty Ten colour tabs

  • Hi

    I have managed to make the tabs on my nav bar a different colour, for each menu item – having followed the forum listed below:

    https://en.forums.wordpress.com/topic/custom-menu-tab-colors-in-twenty-ten

    However, I would like to keep the colour highlighted when the tab is selected.

    I have customised this code to no avail, only the hover works:

    }
#access #menu-item-9 a:hover,
#access #menu-item-9 a:active {
background-color:#ee1c24;
}
#access #menu-item-10 a:hover,
#access #menu-item-10 a:active {
background-color:#eee809;
}

    I don’t have a live site for you to view yet, but any advice would be appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)

  • the css pseudo class :active is only used very briefly when the link is clicked until the next page shows – it is not the class for the ‘current active’ page.

    try to integrate/add .current_page_item or .current-menu-item (check what applies to your menu) into your color tabs.

    Thread Starter lazystuff

    (@lazystuff)

    Thanks for your reply. I may have given the illusion of knowing what I’m doing, sadly I don’t. I’ve tried this amend in my child theme, which doesn’t work – any ideas?

    }
#access #menu-item-9 a:hover {background-color:#ee1c24;}
#access #menu-item-10 a:hover {background-color:#eee809;}
#access #menu-item-11 a:hover {background-color:#a8a8fc;
}

#content #current-menu-item-9 {background-color:#ee1c24;}
#content #current-menu-item-10 {background-color:#eee809;}
#content #current-menu-item-11 {background-color:#a8a8fc;
}

    Thanks in advance

    Thread Starter lazystuff

    (@lazystuff)

    OK. This changes the tab colour, but it’s the SAME colour on each tab – how would I change the colour for each tab to match the hover?

    #access
.current-menu-item {background-color:#eee809;
}

    This doesn’t work, just #eee809 the same as item 9:

    #access
.current-menu-item,
#access .current-menu-item-9 {background-color:#eee809;}
#access .current-menu-item-10 {background-color:#ee1c24;}
#access .current-menu-item-11 {background-color:#a8a8fc;
}

#access #menu-item-9 a:hover {background-color:#ee1c24;}
#access #menu-item-10 a:hover {background-color:#eee809;}
#access #menu-item-11 a:hover {background-color:#a8a8fc;
}

    this kind of combining the css ids and classes might work:

    #access #menu-item-9.current-menu-item a:hover {background-color:#ee1c24;}
    Thread Starter lazystuff

    (@lazystuff)

    yes, that’s got it. thanks.

    #access #menu-item-11.current-menu-item {background-color:#8cc49f;}
#access #menu-item-11 a:hover {background-color:#8cc49f;
}
#access #menu-item-10.current-menu-item {background-color:#afa1ce;}
#access #menu-item-10 a:hover {background-color:#afa1ce;
}
#access #menu-item-9.current-menu-item {background-color:#007db5;}
#access #menu-item-9 a:hover {background-color:#007db5;}
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Twenty Ten colour tabs’ is closed to new replies.