Nav / menu multiple categories with 'active' and 'current-post-...' classes

1

I am building a blog where most of the items on the navigation menu are the different post categories I’ll be using (I just added those categories to the menu on the dashboard appearance menu).

Most of the posts will belong to at least a couple categories, and the thing is, when I’m viewing a single post, all of its corresponding categories receive the ‘active’, ‘current-post-ancestor’ and ‘current-post-parent’ classes, and thus become highlighted.

I think I can avoid that if I just create a page and its respective template for each of the categories (similar to an ‘archive-{category}.php’ for each) and add those pages to the menu, instead of directly adding the categories as menu items, but I was wondering if there’s a way to avoid the problem I’m having while still using categories as menu items, without forcing me to create extra pages and duplicate templates for each one.

2

the navbar in roots works in a way that it adds a class .active on menu items when they are active.

you can edit this in two ways:

  1. either edit css…
    just edit css that is for class .active. check out navbar.less and variables.less and style .active class to be the same as the rest of the links in the navbar. this does not remove the class from the menu. you are just changing the way .active class looks.

  2. … or edit roots_nav_menu_css_class function
    this will remove the class from getting added to the menu and for all cases, not just categories in the menu. just remove the string active from this line: https://github.com/roots/roots/blob/master/lib/nav.php#L58 so that the line looks like this:
    $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', '', $classes);

3

thanks for the quick reply, although at first those solutions don’t really seem to apply to my issue (I might not have explained myself as clearly as I thought ).

I am aware I can style the .active class to look the same as the other menu items, but I actually want it to behave as normal in most situations, highlighting the active page (or, in my case, the active category archive/post list).

Only for when I’m viewing a single post, I’d rather not have any menu items highlighted as .active, particularly when a post belongs in more than one category, as I think it might look confusing for visitors to the blog.

While writing this reply, it dawned on me I might also achieve that with some pretty specific CSS rules, styling the .active class to look the same as the others only on single post views, like with: body.single-post > ul.nav > li.active a

So now I’ve come up with two different ways of possibly solving my problem, and the CSS approach looks the less cumbersome, but being a bit of a nitpicker, I’m still left wondering if there’s another fancier/cleaner way of actually preventing the .active class being attributed to ‘Category’ nav menu items, when viewing a single post, therefore further suggestions are welcome.

4

ok i see…

edit roots_nav_menu_css_class function after line 57 (https://github.com/roots/roots/blob/master/lib/nav.php#L57). just use a variable to store the class and add a conditional that will change the variable value depending on the condition.

  if (is_singular('post')) {
    $active_class = '';
  } else {
    $active_class = 'active';
  }
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', $active_class, $classes);

here is a gist with the full function: https://gist.github.com/slobich/b91d525de604b75df396

5

many thanks @slobich! that was exactly the kind of solution I was looking for, just applied it with success :smiley: