css declaration for submenu items when they are the current page

• 

  eanbehr · Member · Nov 18, 2013 at 9:40 pm

  • Copy link
  • Add topic to favorites

  Hello, forumites

  I need help with determining a CSS selector for the Able theme. When a submenu item on the navigation menu is the current page, the category looks blank because the font and background colors are the same. I’ve tried several things, but can’t extrapolate the correct declaration from the those governing other aspects of the menu structure. It’s obviously inheriting it’s rule from some parent or ancestor. I just can’t figure out how to isolate it. Any guesses anyone.

  Thanks.

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

• 

  thesacredpath · Member · Nov 19, 2013 at 8:53 pm

  • Copy link

  Hi there, in your Custom CSS rule,
  .site-navigation li.current-menu-item > a

  Add the !important attribute to the color declaration so it looks like this:

  color: #FFFFFF !important;

• 

  eanbehr · Member · Nov 20, 2013 at 6:11 am

  • Copy link

  Hey, thank you.

  One question, though. That looks like it selects for the top level menu item, and indeed, when I tried it, it had no effect. I also tried. site-navigation ul ul li.current-menu-item> a, and site-navigation li li.current-menu-item>a, all to no avail, even when adding the !important attribute.

  Any other suggestions?

• 

  thesacredpath · Member · Nov 20, 2013 at 10:19 pm

  • Copy link

  Hi there, I see you have gotten this figured out as the sub menu item, when the current menu item no longer has the text and background color the same, and I see you have a lighter blueish color for the hover and the text is now white.

  If you have any further questions, please let us know.

• 

  eanbehr · Member · Nov 20, 2013 at 10:27 pm

  • Copy link

  I wish it were. The hover is and was always fine, even if you hover over the current page item, then it changes to the hover format. Otherwise, the background and text for current page submenu items are still the same color, therefore nonexistent. You have to click on the title so that the post page comes up, not the home page. Try this: click on any “egg #” so that the URL is the permalink for that post. Then hover over the menu items. You’ll be able to tell which category I’ve assigned that post to by what’s invisible.

  Would still love suggestions.

• 

  justpi · Member · Nov 21, 2013 at 8:12 am

  • Copy link

  I think you need to add the “!important” tag to the #FFFFFF in this addition of yours:

  .site-navigation li.current-menu-parent > a {
      background: none repeat scroll 0 0 #74B5CB;
      border: medium none;
      border-radius: 0;
      box-shadow: 0 0 0 0;
      color: #FFFFFF;
  }

• 

  eanbehr · Member · Nov 21, 2013 at 4:44 pm

  • Copy link

  That was so freakin’ easy. Perfect. Thank you very much.

• 

  justpi · Member · Nov 21, 2013 at 4:50 pm

  • Copy link

  You’re welcome!