Menu highlighting parent items

[And_or]

Lately I see all the themes using # links for the top level items. This helps in the sense that it prevents clicks being make to items that should not be a page. But it also removes the relation to the sub-items.

Because of this classes like .current-page-ancestor do not get set any more and it is impossible (for me) to create a sensible navigation. In fact these days only single pages like "home" or "contact" get a active menu highlight... but since those are single pages it is rather useless   (this happens also in most studiopress demo themes)

The items that really need and active highlight are the ones that have child menu items... Has any one solved this? or ideas on how to tackle this ?

It is a side effect of the 'new' menus in WordPress that make it possible to collect menu items from everywhere, but there is no relational class to reflect the relation...

(And to make it worse 🙂 I am still struggling to get breadcrumbs working on my custom post types, so that way out is blocked for now as well)

---

Simplicity is not Simple Webtaurus

[wpsmith]

Lately I see all the themes using # links for the top level items.

I haven't observed this. Do you have any links for example?

Actually WordPress solves this for you. It assigns the class .current-menu-ancestor. Also, you can solve your issue with JS.

If you could please make a separate ticket for the breadcrumbs, we can better help you. Also, please provide link examples.

---

Travis Smith | Recommended StudioPress Developer & Contributor
WP Smith | @wp_smith | GitHub

Due to the forums, please paste code using Pastebin, JS Fiddle (for JavaScript) or GitHub.
How to use Firebug for Designers by SixRevisions

[And_or]

Examples of # for toplevel menu-items :
demo.studiopress.com/pretty-pictures, demo.studiopress.com/stretch, demo.studiopress.com/executive, demo.studiopress.com/apparition, which are the latest 4 themes published by Studiopress.

Community themes: http://prettydarncute.com/demos/mompreneur/ , http://demo.zigzagpress.com/megalithe/

There are plenty examples 🙂 ... I overlooked the   .current-menu-ancestor class, so there is the start of a solution. But one that does not get used in any of the examples I mentioned.

Playing with Firebug I can solve this in the Stretch Theme by adding #header .current-menu-ancestor a to the css at line +/- 667

#header .menu li a:hover, #header .menu li:hover a, #header .menu .current-menu-item a, #header .current-menu-ancestor a {   color: #FAEA85; }

Great! I was able to solve it in the site I am working on at the moment... but I would suggest that Brian would start using it in the themes as well, since its a basic usability issue.

(ps. breadcrumbs were my own stupidity, I had just enabled them for pages and for the cpt I needed to enabled them for posts ! )

Thanks again Travis, you rock!

---

Simplicity is not Simple Webtaurus

[And_or]

The only place where I can not fix it is in the menu item for "Portfolio" on themes that use the portfolio-post- type like Executive

example: <a href="http://www.webtaurus.nl/portfolio/">my portfolio</a>

It looks like due to the way the portfolio achive page is created, the classes .active etc are not set.

Any idaes there?

---

Simplicity is not Simple Webtaurus

[Gary Jones]

Bit of a hack, but add the selector:

.post-type-archive-portfolio .menu-item-107 a

to the highlighting ruleset.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[And_or]

Since a portfolio category link is a one time setup a hack is fine in this situation. Just need to remember to do it!

Great Gary... really one of those where I think now why didn't I come up with that myself 😉 Thanks a lot.

---

Simplicity is not Simple Webtaurus

[Brain-e]

I'm using executive theme and have managaed to sort out the highlight when a subpage is selected. I want to get the Menu parent highlighted with active white text and colour background, but also the same to happen with the active subpage but with a ligher colour

www,neuroknowhow/brain/

[virtualgina]

I have read this thread (as I have the same issue here : http://mambosdream.com - where I want the Galleries page not to be clickable. Truth be told I still have not been able to figure out where to make the changes to make this happen. In laymans language anyone?

Thanks

[Author]

Posts