'Bootrsap 3 navwalker don't work on mobile
I'm using Bootstrap 3 and wp_bootstrap_navwalker class to implement the navigation style for my wordpress site. On a desktop, the menu works fine - the elements that have children, are opening the submenu on hover (to notice that the parent element,the one that have children's, also have href link, so when user click on the parent element the link opens, and when user hovers the submenu opens). The problem is on mobile, since there is no hover, if the user clicks the parent element, the dropdown menu is opened just 1-2 seconds and then the links opens. Is there any way, that when user clicks on the caret only, the dropdown to be open, and otherwise the link to be opened.
Here is the html of the menu:
<div class="collapse navbar-collapse navbar-1-collapse">
<ul id="menu-main" class="nav navbar-nav">
<li id="menu-item" class="menu-item menu-item-has-children dropdown">
<a href="http://localhost/" data-toggle="dropdown" class="dropdown-toggle">Main element
<span class="caret"></span>
</a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item" class="menu-item menu-item-has-children dropdown-submenu"><a href="http://localhost/" data-toggle="dropdown" class="dropdown-toggle">First element with submenu</a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item" class="menu-item"><a href="http://localhost/">Element in submenu 1</a></li>
<li id="menu-item-" class="menu-item "><a href="http://localhost/">Element in submenu 1</a></li>
<li id="menu-item" class="menu-item"><a href="http://localhost/">Element in submenu 1</a></li>
</ul>
</li>
<li id="menu-item" class="menu-item "><a href="http://localhost/">Second element</a></li>
</ul>
</li>
</ul>
</div>
And here is the wp_bootstrap_navwalker class:
* @see Walker::start_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of page. Used for padding.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
/**
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to so a
* comparison that is not case sensitive. The strcasecmp() function returns
* a 0 if the strings are equal.
*/
if ( strcasecmp( $item->attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->attr_title, 'dropdown-header' ) == 0 && $depth === 1 ) {
$output .= $indent . '<li role="presentation" class="dropdown-header">' . esc_attr( $item->title );
} else if ( strcasecmp( $item->attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '<li role="presentation" class="disabled"><a href="#">' . esc_attr( $item->title ) . '</a>';
} else {
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
/*
if ( $args->has_children )
$class_names .= ' dropdown';
*/
if($args->has_children && $depth === 0) { $class_names .= ' dropdown'; } elseif($args->has_children && $depth > 0) { $class_names .= ' dropdown-submenu'; }
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
// remove Font Awesome icon from classes array and save the icon
// we will add the icon back in via a <span> below so it aligns with
// the menu item
if ( in_array('fa', $classes)) {
$key = array_search('fa', $classes);
$icon = $classes[$key + 1];
$class_names = str_replace($classes[$key+1], '', $class_names);
$class_names = str_replace($classes[$key], '', $class_names);
}
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title ) ? $item->title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
// If item has_children add atts to a.
if ( $args->has_children ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
// Font Awesome icons
if ( ! empty( $icon ) )
$item_output .= '<a'. $attributes .'><span class="fa ' . esc_attr( $icon ) . '"></span> ';
else
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ( $args->has_children && 0 === $depth ) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
/**
* Traverse elements to create list from elements.
*
* Display one element if the element doesn't have any children otherwise,
* display the element and its children. Will only traverse up to the max
* depth and no ignore elements under that depth.
*
* This method shouldn't be called directly, use the walk() method instead.
*
* @see Walker::start_el()
* @since 2.5.0
*
* @param object $element Data object
* @param array $children_elements List of elements to continue traversing.
* @param int $max_depth Max depth to traverse.
* @param int $depth Depth of current element.
* @param array $args
* @param string $output Passed by reference. Used to append additional content.
* @return null Null on failure with no changes to parameters.
*/
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields['id'];
// Display this element.
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
/**
* Menu Fallback
* =============
* If this function is assigned to the wp_nav_menu's fallback_cb variable
* and a manu has not been assigned to the theme location in the WordPress
* menu manager the function with display nothing to a non-logged in user,
* and will add a link to the WordPress menu manager if logged in as an admin.
*
* @param array $args passed from the wp_nav_menu function.
*
*/
public static function kakina_fallback( $args ) {
if ( current_user_can( 'manage_options' ) ) {
extract( $args );
$fb_output = null;
if ( $container ) {
$fb_output = '<' . $container;
if ( $container_id )
$fb_output .= ' id="' . $container_id . '"';
if ( $container_class )
$fb_output .= ' class="' . $container_class . '"';
$fb_output .= '>';
}
$fb_output .= '<ul';
if ( $menu_id )
$fb_output .= ' id="' . $menu_id . '"';
if ( $menu_class )
$fb_output .= ' class="' . $menu_class . '"';
$fb_output .= '>';
$fb_output .= '<li><a href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '">' . esc_html__( 'Add a menu', 'kakina' ) . '</a></li>';
$fb_output .= '</ul>';
if ( $container )
$fb_output .= '</' . $container . '>';
echo $fb_output;
}
}
}
}
Something that I've tried is changing this line of code:
if ( $args->has_children ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
with the following:
if ( $args->has_children ) {
$atts['href'] = '#';
and I've added this script, because the second level sub-menus were not staying open.
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
But this isn't the best solution, since with the change in the code, now the parent elements are losing their href and are not clickable. I'm really confused so any help is welcome. Thanks!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|