Grow your CSS skills. Land your dream job.

Changing font colour of individual menu headings

  • # March 14, 2013 at 8:07 am

    Hi people!

    Is it possible to change the colour of the font in the menu so that each menu item (just the heading, not the drop down) is a different colour?

    If so, what is the code I would need to put into the css to make this happen?

    http://getyourswaggaback.com

    Thank you!

    # March 14, 2013 at 8:20 am

    There are a few ways.

    The simplest is to assign a class to each top level list item.

    As these already exist for you; **’menu-item-26’** etc, you can just do something like

    .menu-item-26 {
    color: pick a color;
    }

    .menu-item-27 {
    color: pick another color;
    }

    etc.

    # March 14, 2013 at 8:20 am

    #access ul {
    float:left;
    padding:0;
    margin:0;
    list-style:none;
    font-size:21px;
    font-weight:600;
    text-transform:uppercase;
    }

    This is the current code for that section, well that’s where I changed the font size and it worked.

    # March 14, 2013 at 8:22 am

    Putting font styles in that section will change them for **everything** in your menu…and that’s not what you wanted.

    # March 14, 2013 at 8:23 am

    Hey Paulie,

    Thanks for replying, this is the only place I found menu-item within the css

    #access a:hover,
    #access li.current_page_item > a,
    #access li.current-menu-item > a {
    background:#000;
    color:#fff;
    text-decoration:none;
    }

    Should I add the relevant numbers within this section? How will I assign numbers to the relevant heading?

    Thank you

    # March 14, 2013 at 8:55 am

    You probably won’t find the suggested code in the existing CSS.

    You’ll have to add it yourself.

    # March 14, 2013 at 9:05 am

    Ok, I tried to add what you suggested from menu-item-1 but it didn’t do anything. Do I need to add anything to the main index page php for it to pick it up?

    # March 14, 2013 at 9:15 am

    Your top level menu items all have specific numbers….you can see them in the HTML in Web Inspector.

    Have you gone through and added classes for all of them?

    If you have then you might try commenting out (not deleting)

    #access a {
    color: #ffffff;
    }

    and seeing what happens.

    # March 14, 2013 at 9:19 am

    Oh I’m sorry, I’ve never used Web Inspector. Is that a program I have to download or something I can do online?

    # March 14, 2013 at 10:13 am

    Ok, I found all the menu item numbers and added them into the css. Hasn’t done anything. The code that you just put above do I need to include that for it to work?

    # March 14, 2013 at 10:18 am

    #access a:hover,
    #access li.current_page_item > a,
    #access li.current-menu-item > a {
    colour:#fff
    background:#000;
    text-decoration:none;
    }

    .menu-item-25 {
    font-colour:#fff
    }

    .menu-item-27 {
    font-color:#154AEB;
    }

    .menu-item-26 {
    font-colour:#15EB79;
    }

    .menu-item-40 {
    font-colour:#15EB79;
    }

    .menu-item-39 {
    font-colour:#15EB79;
    }

    .menu-item-35 {
    font-colour:#15EB79;
    }

    .menu-item-36 {
    font-colour:#15EB79;
    }

    .menu-item-23 {
    font-colour:#15EB79;
    }

    # March 14, 2013 at 10:21 am

    @CMonique, web inspector is part of chrome’s developer tools. using it is an essential component of a web designer/developer’s workflow.

    check out this introduction here: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/

    # March 14, 2013 at 10:28 am

    @dfogge, thank you, I don’t use google chrome.

    I have found the correct menu item numbers though, can you please look at this code and tell me where I’m going wrong?

    #access a:hover,
    #access li.current_page_item > a,
    #access li.current-menu-item > a {
    colour:#fff;
    background:#000;
    text-decoration:none;
    }

    .menu-item-25 {
    colour:#fff
    }

    .menu-item-27 {
    color:#154AEB;
    }

    .menu-item-26 {
    colour:#15EB79;
    }

    .menu-item-40 {
    colour:#15EB79;
    }

    .menu-item-39 {
    colour:#15EB79;
    }

    .menu-item-35 {
    colour:#15EB79;
    }

    .menu-item-36 {
    colour:#15EB79;
    }

    .menu-item-23 {
    colour:#15EB79;
    }

    Thank you

    # March 14, 2013 at 10:30 am

    you really should use chrome.

    i think the problem is you’re using the uk spelling of color in your code. try taking out the u’s. ;)

    # March 14, 2013 at 10:46 am

    Yeah…when I say Web Inspector, I really mean the developer tools that are built into most browsers.

    In Chrome / Safari, you can just ‘right-click’ and ‘inspect element’.

    In IE just hit F12.

    In Firefox, I think you have to install the Firebug extension ( I know I did) . If there are native tools in FF, they are probably along the same lines.

    Oh…and definitely use Chrome as your default browser*.

    *fanboi

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".