Disable active class in home page

1

Hi There,

I wonder how can I disable roots from setting the class active to a menu item.

My case is I dont want to have a “Home” menu. So it means in my home page there shouldn’t be any active class but when I remove this from menu, roots sets the first page in the menu to active.

In other words, how can I achieve something similar like the menu in roots.io ??

2

I think you have two options.
First, many sites don’t have “Home” in the menu, since the logo links to the homepage.
Second, if you want “Home” to be in the menu, you can simply connect two classes, like so:

li.active { background-color: #999; }
li.active.home { background-color: transparent; }
3

I want the first option but when I am in the homepage the “active” class is given to another menu item, in my case the “about” page which is wrong:

<ul id="menu-primary-navigation" class="nav navbar-nav">
<li class="active menu-about">
<li class="menu-blog">
4

Are your home and about pages related in the page hierarchy?

5

No, they are in the same level

6

It’s not something I’ve seen before. The custom menu hierarchy is pretty solid, but when mixed with the page hierarchy you often get active classes you don’t need.

It’s not intended as a specific fix for you but try replacing the roots_nav_menu_css_class with the following;

function roots_nav_menu_css_class($classes, $item) {
  $slug = sanitize_title($item->title);
  $classes = preg_replace('/(current(-menu-)(item|parent))/', 'active', $classes);
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(parent|ancestor))/', '', $classes);
  $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);

  $classes[] = 'menu-' . $slug;
    
  $classes = array_unique($classes);

  return array_filter($classes, 'is_element_empty');
}
7

Yes !!! It worked !!

Cheers !!

8

Thanks, it worked for me too :wink: now i’m trying to add the active class to my cpt (bp-docs)…

9

than, i’ve added Ben Word’s roots_cpt_active_menu function and it works fine for cpt, in my case:

function roots_cpt_active_menu($menu) {
  $post_type = get_post_type();

  switch($post_type) {
    case 'bp_doc':
      $menu = str_replace('active', '', $menu);
      $menu = str_replace('menu-wiki-docs', 'menu-wiki-docs active', $menu);
      break;
    case 'forum':
      $menu = str_replace('active', '', $menu);
      $menu = str_replace('menu-forums', 'menu-forums active', $menu);
      break;

  }

  if (is_author()) {
    $menu = str_replace('active', '', $menu);
  }

  return $menu;
}
add_filter('nav_menu_css_class', 'roots_cpt_active_menu', 400);