Make parent link clickable in Bootstrap with WordPress NavWalker (mobile compatible)
Sep 6, 2018 · 1 min read
This article piggy-backs off the original article by Oscar Mwanandimai:
Make parent link clickable in Bootstrap with Wordpress NavWalker
The issue in activating the parent link of a dropdown is that the link will no longer expand the dropdown in the mobile navigation because the hover state is deactivated on mobile devices. So, the fix is to utilize WordPress’s wp_is_mobile function.
In the “class-wp-bootstrap-navwalker.php” file (or similarly named file), change this:
$atts[‘href’] = ‘#’;
$atts[‘data-toggle’] = ‘dropdown’;to this:
if ( wp_is_mobile() ) {
// Parent link inactive
$atts[‘href’] = ‘#’;
// Parent link toggles dropdown
$atts[‘data-toggle’] = ‘dropdown’;
} else {
// Parent link active
$atts[‘href’] = ! empty( $item->url ) ? $item->url : ‘’;
// Parent link shows dropdown on hover
$atts[‘data-hover’] = ‘dropdown’;
};In this case, the parent link is made clickable while still invoking the dropdown menu on desktop only, and the navigation is still fully functional on mobile devices.