Bootstrap: Activate Menu Parent & Hover

To me, Twitter Bootrap is like gravy! I just want to pour it on everything because it is delicious and makes everything complete. Add in a little WordPress and let the good times roll.

This week, I have built two sites using Bootstrap on WordPress and both requested that the hover be active on a parent menu item and parent menu items be active. If you are not familiar with Twitter Bootstrap, let me explain a little:

1. Hover on parent menu items: On mobiles/tablets there isn’t a hover action like on a desktop with your mouse so because Twitter Bootstrap is a mobile first framework, there isn’t a hover action built in for menus. Makes sense right?
2. Active parent menu items: If a menu item is a parent menu, to activate the drop-down you need to click the parent item to see the submenu. If the parent was an active link, when you clicked the parent you would be taken to that page and you would never see the drop-down.

After a little googling, I found that this is a common request and a number of people have been after this solution, so this is my solution.

How to activate the hover action

In your stylesheet where your media queries are maintained, find the @media (min-width: 768px) query and drop the following css in.

.dropdown:hover .dropdown-menu {
    display: block;
}

The reason why I use the @media (min-width: 768px) query is so that this will take care of all screen sizes before the menu collapse happens, so if someone is using a small laptop I got em covered!

Now you should have a hover action on all your parent menu items.

How to activate the parent menu item

To activate parent menu items, you will need to find the file that takes care of your menu. The name will change depending on your file structure but it will probably have “walker” in the name, eg, I use bootstrap-wp-walker.php which is a WordPress specific file, hence the wp.

Once you have located the file, you will need to find the chunk of code that looks like:

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
  $atts['href'] = '#';
  $atts['data-toggle'] = 'dropdown';
  $atts['class'] = 'dropdown-toggle';
  $atts['aria-haspopup'] = 'true';
} else {
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

As you can see, the # is used as a placeholder for menu items with children, aka, submenu/drop-down. So we need to replace this with the following;

if ( $args->has_children && $depth === 0 ) {
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
  $atts['class'] = 'dropdown-toggle';
  $atts['aria-haspopup'] = 'true';
  // $atts['data-toggle'] = 'dropdown'; <- This line gets added in theme.js when window width is < 768
} else {
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

Almost done!
You need to add the data-toggle attribute when on a mobile device so the menu works correctly, this will be active on windows smaller than 768px, this is done with a little jQuery. Create a jQuery file place the below code in it. Eg, I have this saved as, includes/js/bootstrap-menu.js

jQuery(function($) {
  // Bootstrap menu magic
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $(".dropdown-toggle").attr('data-toggle', 'dropdown');
    } else {
      $(".dropdown-toggle").removeAttr('data-toggle dropdown');
    }
  });
});

Call your new jQuery file in your function file, you will need to do this in the wp_enqueue_scripts function. If you don’t have one, here is the full example.

function _tb_scripts() {
  wp_enqueue_script( '_tb-bootstrapwp_menu', trailingslashit( get_template_directory_uri() ) . 'includes/js/bootstrap-menu.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', '_tb_scripts' );

You’re done!

Now your parent menu items should be active and you can now go to the parent page, plus you also have the hover that you needed!