Change font color of menu item when submenu is selected

  • Hi,

    I’m using the oxygen theme and want the font color of the main menu item (primary menu on top) to change when one of its sub-menu items is selected (the main menu items stand for different events and I want people to always know which event’s page they’re on when they are eg looking up the dates)

    Is there a CSS code for something like this?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Hello,

    In your custom css option:
    if you add the following bit of code will change the background of your top menu item nicely wrapped around the word and highlight current submenu in addition:

    li[class*="current"] > a {
      background-color: #FFC0CB;
    }

    Hope this helps,

    grtz~

  • Hi,

    thanks for the suggestion, works great!

  • I’m using a different code now, so just the font color changes (no background color). Thought I would share it here in case anyone who looks up this topic might find it useful:

    .main-navigation ul li a {
    color: #0247b5;
    }

    .main-navigation li[class*=”current”] > a {
    color: #75a9fd;
    }

    .main-navigation ul li a:hover {
    color: #75a9fd;
    }

    .main-navigation ul li a.active,
    .main-navigation ul li a.active:hover {
    color: #75a9fd;
    }

  • The topic ‘Change font color of menu item when submenu is selected’ is closed to new replies.