WordPress.org

1. lazystuff
   Member
   Posted 2 years ago #
   

   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:

   http://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.

2. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   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.

3. lazystuff
   Member
   Posted 2 years ago #
   

   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

4. lazystuff
   Member
   Posted 2 years ago #
   

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

5. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

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

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

6. lazystuff
   Member
   Posted 2 years ago #
   

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

Topic Closed

This topic has been closed to new replies.