Setting Current Nav Menu Item color…

[Chris Moore]

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

[Terry]

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.

[Chris Moore]

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

[Chris Moore]

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

[Terry]

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