Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #3993


    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.





    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{
    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{

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


    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>




    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:

    color:#666666 !important;

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


    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.


    Mmm… it works for me here:

    Maybe try to clear the browser cache.


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

    In other words, this works:

    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.

    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.




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


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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Change menu item color’ is closed to new replies.