WordPress menu – css selector issue

1 Views

I have a custom menu on a page: 

<ul id="menu">
   <li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-148 publish">
       <a href="http://url/site/index.php/products/product-name/">Information<span class="circle">•</span></a>
   </li>
   <li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-149 publish">
       <a href="http://url/site/index.php/products/product-name/register/">Register<span class="circle">•</span></a>
   </li>
   <li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150 publish">
       <a href="http://url/site/index.php/products/product-name/support/">Support<span class="circle">•</span></a>
   </li>
   <li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151 publish">
       <a href="http://url/site/index.php/products/product-name/downloads/">Downloads<span class="circle">•</span></a>
   </li>
</ul>

Information is the parent page of the other 3

Read More

I have the following CSS, but it isn’t recognised at all, it doesn’t show up in fire-bug as being overridden, it just doesn’t seem to exist, but not sure why? 

.current_page_ancestor > a,
.current-menu-ancestor > a  { border: 1px solid red; color: red; background-color: blue; }

If I remove .current-menu-ancestor > from the CSS then the styles effect all the links as it should

Post Views: 1

Related posts

2 comments

  1. In your CSS change:

    current_page_ancestor

    To:

    current-page-ancestor

    But make sure to check out wordpress cusom menu walker.

    It will have the sub items inside a new ul which is nicer and better for seo.

  2. I would use this instead, it’s also how I style WordPress menus in theme development.

    Target the main navigation > child > child of child

    #menu > li > a { border: 1px solid red; color: red; background-color: blue; }

    CODEPEN DEMO

    OR

    .current-page-ancestor > a  { border: 1px solid red; color: red; background-color: blue; }

    CODEPEN DEMO

Comments are closed.