0

I want to change the text color of the menu so it's different on alternative pages. I have used the following CSS to change the text color of the menu, hover color and current menu item color. These work on their own but when run on the same CSS script they don't. What is the CSS code to do both of these things without doing one of the other?

//Change the text color of the menu

.page-id-11 .sf-menu > li > a, .page-id-11 .sf-vertical > li > a {
    color: grey;
}

//Change the hover color and current menu item color

.page-id-11 .sf-menu > li > a:hover, .page-id-11 .sf-menu > li.current-
menu-item > a, .page-id-11  .sf-menu > li.current-menu-ancestor > a, 
.page-id-11 .sf-vertical > li > a:hover, .sf-vertical > li.current-
menu-item > a, .page-id-11 .sf-vertical > li.current-menu-ancestor > a 
{
    color: red;
}
Leo Rogers
  • 3
  • 2
  • 1
    "These work on their own but when run on the same CSS script they don't" Neither of them work? Then what color is the text? Also, this may just be your snippet, but you have a newline character between `current-` and `menu-item` in two places. – Joseph Marikle Oct 24 '17 at 15:08

1 Answers1

0

.page-id-11 .sf-menu > ul > li > a:hover{
    color: red;
}

.page-id-11 .sf-menu > ul > li > a, .page-id-11 .sf-vertical > li > a {
    color: grey;
}
<div class="page-id-11">
  <div class="sf-menu">
    <ul>
      <li>
        <a>Link</a>
      </li>
    </ul>
  </div>
</div>

I'm just assuming your code has <ul> around the <li> as it should. If you do, the > selector doesn't recognize the <li> tags, because they are "hidden" inside the <ul> ( > is looking for the elements being directly inside the container, not nested down further. Check this for reference.).

If you put ul into the CSS-Stylings, they work.

Maharkus
  • 2,841
  • 21
  • 35