How to change color of a WordPress menu item?

Hi I'd like one particular menu item to look differently (in this case the item titled "St. Paul's").

See http://sanctuarykelowna.com

What would be the best way to do that with this theme using CSS?

Thanks

  • Mark Wallace
    • Learn-ing-er

    You could create a child theme.

    Really the easiest way would be to use Google Chrome. You can then highlight it, right click your mouse and choose inspect element. This will show you where to find it in the css. If you decide to explore the css without it, then look for widgets or widgets title.

    Enjoy!

  • Patrick
    • Support Monkey

    @drewc

    Another option is to assign your own CSS class to that specific custom menu item in your WP backend. You can then add whatever styles you like to that particular item.

    To assign classes to menu items, go to "Appearance" > "Menus", click the "Screen Options" link at the top-right of your screen, and tick the "CSS Classes" checkbox. See attached screenshot.

    Hope this helps! :o)

  • drewc
    • Flash Drive

    @Patrick

    Thanks this has helped me a lot. The only side effect I'm seeing is that it also seems to affect the sub menu items as well. Think you could take a look at the site?

    http://sanctuarykelowna.com

    Notice that the color change and the underline is affecting the sub items as well under "St. Paul's".

    Here was the code I put into my style sheet:

    .mainNav .spnav a {
    color: #158CAB;
    text-decoration: underline;
    }

    Perhaps this could use a tweak (or two)! :slight_smile:

  • Patrick
    • Support Monkey

    @drewc

    Those subnav links are inheriting the style of the parent because your CSS told them to. Basically, your CSS is saying: "underline and color ALL links under li.spnav".

    You can get around that by changing line 128 in your style-sheet from this

    .mainNav li > ul li a {

    to this

    .mainNav li > ul li a, .mainNav li.spnav > ul li a {

    The above says: "apply the following styles to all links in the subnav elements, INCLUDING those under li.spnav".

    Hope this helps! :o)

  • PC
    • WPMU DEV Initiate

    Greetings and thanks for being a great community member.

    We haven't heard from you on this one for long and I am doing a regular followup to see if there is still something we can assist you on this thread.

    Just to manage the support issues more efficiently, I am marking this thread as resolved for now however this is not being done to avoid your questions in any ways.

    Please feel free to mark this is "Not resolved" in case you have further questions and we would be back on it.

    Thanks a lot for being with WPMU DEV.

    Cheers
    PC
    Sales &Support

    Did you know we offer FREE lifetime memberships? Click here to learn more.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.