• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Setting Current Nav Menu Item color…

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Setting Current Nav Menu Item color…

This topic is: resolved

Tagged: current nav menu, Eleven40-Pro

  • This topic has 4 replies, 2 voices, and was last updated 11 years, 10 months ago by Terry.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 8, 2013 at 11:13 am #55000
    Chris Moore
    Member

    Hello!

    Just upgraded to Genesis 2.0 and eleven40 Pro and I have been doing my customizations. I'm a little bit tired from working on it all last night, so I thought I would just reach out to all of you about this one easy thing I am having trouble with.

    I would like to do two things:

    1.) I would like the current nav menu item to be color: #222;
    2.) I would like the current category nav menu item to also be color: #222;

    Here's the site: Reflect On This

    Thanks for your help!


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    http://reflectonthis.com
    August 8, 2013 at 4:57 pm #55123
    Terry
    Member

    It looks like changing around line 1757 to
    .eleven40-pro-blue .genesis-nav-menu a {
    color: #222;
    }
    should do the trick.
    It does impact your hover (which you'll loose b/c it's set at #222).

    Hope this helps.

    August 8, 2013 at 5:36 pm #55134
    Chris Moore
    Member

    Thanks for your reply @maroontech, but maybe I should have been clearer. I meant the color of the nav menu item when you are ON that page. I want to keep the menu items blue, the hover as #222, and then the current page/category you are on as #222 as well.

    I think this is the selector that I was hunting down:

    .eleven40-pro-blue .genesis-nav-menu .current-menu-item > a

    I will give this a try...


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    August 8, 2013 at 5:43 pm #55135
    Chris Moore
    Member

    Yep, I figured it out! That one did the trick.. This is the one I was looking for:

    .eleven40-pro-blue .genesis-nav-menu .current-menu-item > a

    It's live on the site now...

    ONE REMAINING QUESTION:

    How do I get the nav menu to be #222 when I am reading a post that is in a particular category?

    So, if I am reading this post (linked here), how do I get the "Spirituality" secondary nav item to light up with #222?

    I suppose this requires doing some custom PHP work. But I will put it out there... I'm sure it's easy. I just don't know how to do it! 🙂


    Resepctfully, Chris Moore
    Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

    August 9, 2013 at 8:39 am #55231
    Terry
    Member

    Sorry Chris, I totally missed that. Too much good coffee yesterday.

    You should just be able to target the css, something like...

    .nav-secondary .current-post-ancestor a {
    color: #222; (I always pick something crazy like red to test)
    }

    (instead of .current-post-ancestor could try .current-post-parent, .current-menu-ancestor, .current-menu-parent)

    Let me know if that works for you. I tested it on one of my blogs and it did the trick.
    TGIF!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble