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

Community Forums Forums Design Tips and Tricks Can't get current menu item to be a different color

This topic is: not resolved

This topic contains 7 replies, has 4 voices, and was last updated by  computerkitten 2 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #68555


    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:



    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;



    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.



    Sridhar – I have never seen this syntax before in CSS… can you please explain this?

    .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 (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.



    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?




    No it’s CSS3. – 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



    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!!!!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.