Apply adjustment like color and size to top level menu only

• vunguyen

  said

  Hi guys,

  For the life of me, I can’t seem to apply any decoration like font-size or color to the top level menu (Note: top level menu ONLY).
  I even tried to create a special class and put it in custom css field. It just doesn’t want to work.
  This technique works fine for any of the sub menu but not the top level menu.
  Any help would be much appreciated

  Cheers!

• sturader

  said

  I’m using mostly icons, but this works for text as well. !important may need to be used selectively:

  #megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.wpmega-item-description {
  color: #AFAFAF; (as desired)
  font-size: 13px; (as desired)
  line-height: 1;
  }

• jeffw

  said

  Hi, vsync.

  You need to use the CSS > selector to target immediate children only, like this:

  #MainNav #megaMenu ul.megaMenu  > li.menu-item  > a span {
    color: red !important;
    font-size: 20px; !important
  }

  Add the styles to your Custom CSS box or custom stylesheet.

  References:
  http://www.w3schools.com/cssref/css_selectors.asp

• vunguyen

  said

  Thanks guys! Worked like a treat

  Cheers!