Grow your CSS skills. Land your dream job.

Changing font colour of individual menu headings

  • # March 14, 2013 at 12:06 pm

    Additionally, because of the way your CSS is structured, you’re going to need to set your color on the “a“ element itself, like so:

    .menu-item-25 a { color:#fff }

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

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

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

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

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

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

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

    But srsly, use Chrome. All the cool kids do!

    # March 14, 2013 at 12:33 pm

    Ok, I’ll look into Chrome when I’ve finished. I’ve done the script exactly like that now, but still…nothing.

    Not sure what else to do.

    # March 14, 2013 at 12:47 pm

    It looks like this is being set in your ““:

    #access a {
    color:#ffffff;
    }

    And on line 840 of “style.css“ too: “color: #f0f0f0;“.

    IDs are 256 times more specific than classes, or something like that. Thusly, these two lines are overriding your declarations because they’re using more specific selectors. There are two ways to fix this:

    1.) The proper way: remove (or comment out) the above two lines of CSS.

    2.) The easier way (but adding needless specificity that will be hard to overwrite later if needed)—change your class selectors to ID selectors, since each of your links have IDs anyway:

    #menu-item-25 a { color:#fff }

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

    #menu-item-26 a { color:#15EB79; }

    #menu-item-40 a { color:#15EB79; }

    #menu-item-39 a { color:#15EB79; }

    #menu-item-35 a { color:#15EB79; }

    #menu-item-36 a { color:#15EB79; }

    #menu-item-23 a { color:#15EB79; }

    Also, thanks to looking at your website, I now have Paper Planes by M.I.A. stuck in my head. “No on on the corner got swagga like us/”

    # March 14, 2013 at 12:48 pm

    There are other selectors overriding what you have added.

    You would need to comment out

    Line 342 of stylesheet

    #access a {
    color: #ffffff;
    }

    Line 837

    #access a {
    color: #ffffff; < -- just this
    }

    # March 14, 2013 at 1:23 pm

    I just realised the #access a where the menu-item is, is the highlighter colour. I want to change the colour of the word from white to individual colours. Would I do this in the same way?

    # March 14, 2013 at 1:30 pm

    That will change the color of **all** a links inside the element with an ID of #access.

    That wasn’t what you wanted.

    # March 14, 2013 at 1:38 pm

    No, I wanted to change the heading as you see them (currently white) without the hover. I.E. MUSIC (red) VIDEOS (blue) etc.

    # March 14, 2013 at 2:07 pm

    I need the menu to resemble this one

    http://sbtv.co.uk/

    # March 14, 2013 at 4:20 pm

    We’ve told you how to do that.

    Keep trying.

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

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