Make parent link clickable in Bootstrap with WordPress NavWalker (mobile compatible)

Becca Owens
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade