Oxygen theme, how to make item (of custom menu) change color on click

• 

  orientaltextiles · Member · Aug 23, 2015 at 4:47 pm

  • Copy link
  • Add topic to favorites

  How to make an item change color (say, to blue) on click? The items I am working on are in a Oxygen’s custom menu (showed in left-column of my website).

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

• 

  thesacredpath · Member · Aug 25, 2015 at 2:06 am

  • Copy link

  Hi there, give the following a try.

  .widget_nav_menu .current-menu-item a {
      color: #0066ff;
  }

• 

  orientaltextiles · Member · Aug 29, 2015 at 10:34 pm

  • Copy link

  It works for items without sub items. Thanks :)

  However, for items with sub items, then an item and ALL of it sub-items also change color as that item clicked on.

  Can the color change happen to just the clicked-on item?

• 

  thesacredpath · Member · Aug 30, 2015 at 3:54 am

  • Copy link

  Hi there, let’s change the code I gave above to the following.

  .widget_nav_menu .current-menu-item > a {
      color: #2899c3;
  }

• 

  orientaltextiles · Member · Aug 30, 2015 at 4:27 am

  • Copy link

  Yes, that’s it! Thanks :)

• 

  orientaltextiles · Member · Aug 30, 2015 at 4:49 am

  • Copy link

  @thesacredpath: This thread (about secondary menu) may sound similar but it’s not the same as the one below (about primary menu):
  https://en.forums.wordpress.com/topic/oxygen-make-item-primary-menu-change-color-as-any-of-its-sub-items-clicked-on?replies=2#post-2455263#postform

  More over the latest code does not work for the above thread (about primary menu).

  Would you please double-check? (Primary Menu, showed in blue color, near top, below the Site Title of my website).

• 

  thesacredpath · Member · Aug 30, 2015 at 5:44 am

  • Copy link

  Sorry, I have reopened that thread for you.

• 

  thesacredpath · Member · Aug 30, 2015 at 5:52 am

  • Copy link

  Sorry, for the primary menu at top, add the following and adjust the color as desired.

  .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a, .current-menu-parent > a, .current-menu-ancestor > a {
      color: #cc0000 !important;
  }

  I’ve include the code to turn the parent menu item the same color also. If you do not want that, then remove this bit from the CSS selector.
  , .current-menu-parent > a, .current-menu-ancestor > a

• 

  orientaltextiles · Member · Sep 2, 2015 at 9:30 pm

  • Copy link

  It appears to work (even more than what I’ve ever wanted! you read my mind :). Let me spend some time testing the code, if all OK, I will go back to this thread and change it to “resolved”.

  By the way, what courses (or URLs, etc.) could I learn to become efficient at CSS like … you :)

• 

  thesacredpath · Member · Sep 3, 2015 at 6:27 pm

  • Copy link

  There are a number of tutorials online that will give you the basics. There are some listed in the sticky post at the top of the CSS forum and there are more in our CSS Basics support page.

• 

  orientaltextiles · Member · Sep 4, 2015 at 4:34 pm

  • Copy link

  Thanks a bunch :)

• 

  thesacredpath · Member · Sep 4, 2015 at 7:04 pm

  • Copy link

  You are welcome.