[Resolved] Odd Menu – Shows Active on Categories

[Dee Broughton]

Maybe I can describe this: I have menu items that are category links. Normally, I would expect those to be ACTIVE if user clicks them and they are showing the posts in that category. No problem. But they also show ACTIVE on a single page/post. This is undesirable because the user may see the menu highlighted in more than one category and that does not show the user what “page” he’s on. Does this make sense? I have messed with the css so perhaps I messed something up, as this is not behavior I’ve seen before in my sites. Anyway, I don’t want it to do that. What do I do?

[Tom]

I would have to see the site so I could take a look at the code to know exactly what’s going on. Is it up somewhere so I can take a look?

[Dee Broughton]

Yes, I’m still building it but I’ve taken off maintenance mode so you can see it. The blog page looks awesome http://elt.international/
but I’ve put this post in both the news and resources categories so you can see that it “lights up” for both on a single post.
http://elt.international/pronunciation/

I’ve purposely made the ELT International stay “active” so that it functions as a visual header which, if I messed it up, is probably where I did it. I also gave the last item on the menu a class to push it right so it could be related to that, but I wouldn’t think so.

By the way, though, I’m very happy with the way GeneratePress is working out with it. It’s quite different from the first one I did with it dbepub.com.

[Dee Broughton]

Tom, I tested this again on a clean install (one that I have not modified and that has no other plugins activated other than GeneratePress Addons) and it does the same thing. Is this the theme’s intended behavior? It’s not what we’d expect to happen, though, right? A menu item that is a category link should not show active because a single post is in that category. And it certainly shouldn’t show active for more than one menu item if the post is in more than one category. Right?

http://blackpowderbandit.com/blog-post-2/

[Tom]

Just took a look, and yes, this is the intended behavior.

As that post is a child of the category in the nav, it highlights the nav item as a parent.

To get around this, you can try adding custom links to the menu instead of the categories themselves. This may stop WordPress from giving the menu item the parent class.

Let me know if that works 🙂

[Dee Broughton]

I can find a way around it, but WP does not behave that way in other themes that I am using. They show the category in some other way, which I’ve hidden in GeneratePress. I don’t think this is a desirable way to handle category links.

[Tom]

The issue is if I remove that functionality, it will remove it for more than just categories when you’re on a page with a parent item in the menu.

It’s far better to use a workaround for your specific case instead of removing the functionality completely. If someone else in the future wants the parent item to be highlighted and the functionality is gone, they’re out of luck completely with no workaround.

Other themes may not have this feature, but I want GeneratePress to be a complete solution, which means including default WordPress functionality like this (it’s not a made up function for GeneratePress only). Then if someone doesn’t want it, it’s quite easy to remove.

Let me know if you have any issues with the custom links 🙂

BTW – I love the site, it looks AWESOME!

[Dee Broughton]

Custom links work fine. I wasn’t aware of it as a WP feature. I guess I haven’t used themes that use it before. Thanks. I’m pleased with it.

[Tom]

Awesome 🙂

There’s quite a few classes that WP adds to menu items when the child page is active – not all themes use all of the classes, which can be a pain when you want the class to be there. I made an effort to include all of them, as it’s easier to remove the class/find a different way of doing it than adding the class.

Glad the custom links work!

[Alex]

Hi Tom,

I’m hoping you can help me figure out how to fix the active state on three of my menu items. They are showing active all the time regardless of the page. I know this is because they link to anchors in the fixed front page. I don’t know how to structure them so they don’t show as active AND have them link back to the front page anchor from a different page on my site. (e.g. from the contact page to the latest news section of the front page.

my site is http://www.brooklynjujutsu.com

Thanks so much,

Alex

[Tom]

Hmm, interesting. I don’t think WP core saw this coming when they added the functionality to set all items that point to the homepage as current when on the home page.

You can try doing something like this:

.main-navigation .main-nav ul .menu-item-home.current-menu-item > a {
    background: #222;
    color: #FFF;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Author]

Posts