Wordpress menu - css selector issue

Question

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

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

Rens Tillmann · Accepted Answer · 2015-11-09 00:16:09Z

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.

answered Nov 9, 2015 at 0:16

Rens Tillmann

8921 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

milky_jay Over a year ago

Thanks, did not notice the underscores, that's interesting because I copied the css styles from the Wordpress Twenty Thirteen theme, and checked and the typo was there :/

Rens Tillmann Over a year ago

I know the feeling xd

Peter Girnus · Accepted Answer · 2015-11-09 00:39:44Z

0

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

edited Nov 9, 2015 at 0:39

answered Nov 9, 2015 at 0:13

Peter Girnus

2,7691 gold badge22 silver badges24 bronze badges

4 Comments

Rens Tillmann Over a year ago

And how would you check if it is the current ancestor? This does not resolve his problem nor answers his question. Although I agree with the way you do the menu styling.

Peter Girnus Over a year ago

His question was his CSS was not recognized, nor his styles being placed on the DOM elements. It didn't show up in firebug either, not how to check if it is the current ancestor.

Rens Tillmann Over a year ago

True but the reason why it didn't show up in firebug was because he made typo

Peter Girnus Over a year ago

ty for letting me know

Collectives™ on Stack Overflow

Wordpress menu - css selector issue

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related