I am currently utilizing wp-bootstrap-navwalker.php to generate bootstrap navigation menus on my Wordpress site. I am working on a project where the client requires the parent of a submenu in the navigation to be clickable. After modifying the code in wp-bootstrap-navwalker.php to allow for this functionality, I encountered some issues on smaller devices.
// If item has_children add atts to a.
if ( $args->has_children && 0 === $depth ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url :
'';
}
$(window).resize(function() {
//1200 is my modified breakpoint on this design for the collapse menu
if ($(window).width() < 1200) {
$(".dropdown-toggle").attr('data-toggle', 'dropdown');
} else {
$(".dropdown-toggle").removeAttr('data-toggle dropdown');
}
});
Since the parent menu item typically triggers an event that displays the submenu with child links, changing this functionality has made it only work on desktop browsers capable of hover events.
I have dedicated time trying to find a solution, and the only idea I have come up with is automatically expanding the collapsed bootstrap menu on smaller devices to show all parent and child items by default.
Despite my efforts, I have not been able to achieve this. Is there anyone who knows how this can be accomplished?