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 1 year ago.

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

    computerkitten
    Participant
    Post count: 102

    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

    #68568

    Sridhar Katakam
    Participant
    Post count: 1050

    Add this CSS:

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

    #68580

    jhguynn
    Participant
    Post count: 223

    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.

    #68618

    computerkitten
    Participant
    Post count: 102

    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!

    #68625

    Sridhar Katakam
    Participant
    Post count: 1050

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


    #68694

    computerkitten
    Participant
    Post count: 102

    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!

    #68719

    emasai
    Participant
    Post count: 738

    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

    #68731

    computerkitten
    Participant
    Post count: 102

    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.