Change menu item color

8 posts from 2 voices

• Started 2 years ago by jonmrich
• Latest reply from Dude
• This topic is not a support question

Tags:

• CSS
• menu

1. 

   jonmrich
   Member

   Hello.

   I'm looking to change the colors of the second menu (font and background). It's the "Select a Category" area at this site: http://www.interactresponsibly.com. It appears just above the accordian. I can change all the menu items, but can't figure out the CSS to just edit the first one. I'm a bit of a newbie.

   I'm doing this because I thought that the menu headers lined up too much with the accordian images making it look like the categories in the menu matched the picture below. If anyone has a different idea of how to seperate these and make obvious that they are independent, I'll take it.

   Thanks,
   JMR

   Posted 2 years ago #
2. 

   Dude
   Dude

   Hey,
   you can change the catnav link color in style1/2/3/4.css (depending on the skin you're using. If you use the default skin (skin1.css) the code looks like:
   

   .catnav li a{
   color:#666666;
   border-right:1px solid #aaa;
   text-shadow:1px 1px 0px #fff;
   }
   
   .catnav .current a, .catnav li a:hover, .catnav .currentli_item a, .catnav .current-menu-item a, .catnav .current-menu-item a{
   color:#464646;
   }

   Change the color values as you like. The css files can be found in the folder called "css".

   Posted 2 years ago #
3. 

   jonmrich
   Member

   I was able to do what you offered up, which is to change the color of everything in the "Second" menu, but I'm looking to change the color of just one of the the menu items. Specifically, I'd like to change the color of the first one. Can I change the color of just one of the menu items?

   On this page (http://www.interactresponsibly.com/), I'm looking to change the color of just the menu item that says "Select A Category". Can this be done?

   This is the HTML for the specific piece I'm referring to:

   <li id="menu-item-780" class="menu-item menu-item-type-custom menu-item-object-custom"><a style="height: 34px; "><strong>SELECT A CATEGORY</strong></a></li>

   Thanks,
   JMR

   Posted 2 years ago #
4. 

   Dude
   Dude

   Yes, that's possible - you can change the link color of one menu item by using it's id as selector. If you view the source code of your page you'll notice that every menu item has an unique id - i.e. your first one has: menu-item-780 . So add following code to style1/2/3/4.css:
   

   #menu-item-780{
   color:#666666 !important;
   }

   This will change the color of your first menu item only.

   Posted 2 years ago #
5. 

   jonmrich
   Member

   I tried the code you offered before I posted here and it didn't work for me. I put it in css3 and it appears when I inspect it with firebug, but it's just being ignored.

   Posted 2 years ago #
6. 

   Dude
   Dude

   Mmm... it works for me here:

   

   Maybe try to clear the browser cache.

   Posted 2 years ago #
7. 

   jonmrich
   Member

   Yeah...I just did that. I was about to change the background color, but not the text color.

   In other words, this works:

   #menu-item-780{
   background-color:#f6b100 !important;
   }

   But this doesn't have an impact (and yet still show up when I inspect the element). Doesn't work in any browser.

   #menu-item-780{
   color:#f6b100 !important;
   }

   I gave up on changing the font color and switched to changing the background color, but I'd still like to just change the font color.

   Thanks.

   Posted 2 years ago #
8. 

   Dude
   Dude

   Try,
   

   #menu-item-782 a strong, #menu-item-782  a strong{
   color: #F80C0C !important;
   }

   or:
   

   #menu-item-782 a, #menu-item-782 strong, #menu-item-782 span{
   color: #F80C0C !important;
   }

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.