"active" menu item (page you are on)

[Matt Meade]

I have a (client requested) menu with one parent link that has a bunch of child links to the same page but with different anchor text.

Furthermore there are two parent level items in the menu that are the same page but with different navigation labels.

They are all getting "active" class and it's highlighting way too many menu items. 

What's the best way to get control of my automatic "active" classes on the page I am viewing?

If this helps visualize:

• Nav Menu
• page1.html (Home)
• page2.html (about us)
• page3.html (lots of stuff)
• page3.html#some (some stuff)
• page3.html#tab1 (first tab)
• page3.html#tab2 (second tab)
• page3.html#tab3 (third tab)
• page4.html (fourth thing)

So basically when I go to any single place on page3, All of those items are highlighted via WP automatically adding the "active" class:

• Nav Menu
• page1.html (Home)
• page2.html (about us)
• page3.html (lots of stuff)***
• page3.html#some (some stuff)***
• page3.html#tab1 (first tab)***
• page3.html#tab2 (second tab)***
• page3.html#tab3 (third tab)***
• page4.html (fourth thing)

It doesn't care that they are different #anchor text.

How do I get more specific handling for urls that are so similar?

Thanks in advance

[Chad Warner]

Matt, you may need to use JS to detect which part of the page is in view and highlight the appropriate menu item. For targeting via CSS, each WordPress menu item automatically gets its own ID, or you can manually add a CSS class to any menu item.

It seems like a problem that one-page sites face. I don't know JS, but here are some potential starting points:

• Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation
  
• Making navigation links highlight when relevant element passes underneath it, using JavaScript/JQuery?
  
• Highlight active link when using scrollto based on current view
  
• Highlight selected navigation item (anchor link same page)
  

You could also look at existing one-page WP themes to see how they handle it.

An alternative approach would be removing the styling for the active class, so no menu items are highlighted. It would at least remove confusion.

Hopefully someone else can give you more specific and helpful advice.

Chad Warner | OptimWise | WordPress Web Design | http://optimwise.com

--
You received this message because you are subscribed to the Google Groups "WordPress Grand Rapids (WPGR)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wpgr+uns...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.