Can't get current menu item to be a different color

[computerkitten]

Have a CSS question... in the menu, I want the current page menu item to be blue. Can't seem to figure this out with my custom menu. I've tried:

div#mymenu .current-menu-item > a and so forth correctly and that didn't work. Ideas? Its just a 2 page website but want to know which page I'm on once I click one of the two.

Website is here:

http://tinyurl.com/la7j6eb

THANK YOU

[Sridhar Katakam]

Add this CSS:

.page-id-34 #mymenu a:nth-of-type(2n+1),
.page-id-44 #mymenu a:nth-of-type(2n) {
    color: #6689cc;
}

---

Genesis Tutorials | Follow me on Twitter

[jhguynn]

Computerkitten: Be aware that the navigation items have css in two places in your style sheet: (1) under the section for navigation and (2) under the section for theme colors. Since the styles "cascade", if you change something in the navigation section but not in the theme color section, you may not see the changes. Pretty sure you only need to mess with the theme color section of your targeted class is in both places.

[computerkitten]

Sridhar - I have never seen this syntax before in CSS... can you please explain this?

":nth-of-type(2n+1),
.page-id-44 #mymenu a:nth-of-type(2n) {"

Jhguynn - I will take a look at the theme color section, thank you!

[Sridhar Katakam]

.page-id-34 #mymenu a:nth-of-type(2n+1)

selects the first anchor element under ".page-id-34 #mymenu"

.page-id-44 #mymenu a:nth-of-type(2n)

selects the second anchor element under ".page-id-44 #mymenu"

See http://nthmaster.com/ (scroll down to "USING THE :NTH-OF-TYPE" section)

You could also just perhaps use ":nth-child(n)" to simplify things. Give it a try if you would like.

---

Genesis Tutorials | Follow me on Twitter

[computerkitten]

Sridhar - thank you for explaining... but whatever happened to the .current-menu-item that I thought used to work? I've never seen this done this way before. Is this part of HTML5?

Thanks!

[emasai]

No it's CSS3. http://www.w3schools.com/cssref/sel_nth-child.asp - It's a rather complicated syntax, but you could possibly target your menu item by using a custom class. If you do not see the option on your menu item, go to Screen Options and check CSS Classes then add the class you want to target to your menu item.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[computerkitten]

Sridhar that worked, thank you!!!
Emasai - thank you for the w3schools link...will read up on that! I did this menu as a text widget because they wanted text just before the menu items. But thank you for all of your help!!!!

[Author]

Posts