Bootstrap dropdown & WordPress : stay to “false”

Question

I use some functions and filters to add Bootstrap classes to my navbar :

// nav > ul > li
add_filter ( 'nav_menu_css_class', 'so_37823371_menu_item_class', 10, 4 );
function so_37823371_menu_item_class ( $classes, $item, $args, $depth ){
    if($args->theme_location == 'menu-1') {
        $classes[] = 'nav-item text-center position-relative align-items-center d-flex px-1';
        $hasChildren = (in_array('menu-item-has-children', $item->classes));
        if ($hasChildren) {
            $classes[] = "dropdown";
        }
        return $classes;
    }
}

// nav > ul > li > a
add_filter( 'nav_menu_link_attributes', function($atts, $item, $args, $depth) {
    if($args->theme_location == 'menu-1') {
        $atts['class'] = "nav-link text-primary text-uppercase";

        $hasChildren = (in_array('menu-item-has-children', $item->classes));
        if ($hasChildren) {
            // add the desired attributes:
            $atts['role'] = "button";
            $atts['data-toggle'] = "dropdown";
            $atts['data-target'] = "#";
            $atts['aria-haspopup'] = "true";
            $atts['aria-expanded'] = "false";
        }
        return $atts;
    }

}, 10, 4 );

// sub-menu
class Walker_Nav_Sub_Menu extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = NULL){
        $indent = str_repeat("t", $depth);
        $output .= "n$indent<ul class="dropdown-menu bg-white border-0 m-0 w-100">n";
    }
}

When I click on nav parent menu on desktop version, it works. But when I click with a touch device (smartphone or tablet), nothing happen : aria-expanded=”false” stay to false, and the only class added is “Focus” (with desktop, it’s “show”).

I have been trying for hours to solve this problem, but nothing helps..

EDIT : Something strange happened : With Chrome DevTools, if I copy the HTML of the navbar and paste it (in DevTools), it works…

0
Nicolas Lorand 4 months 0 Answers 8 views 0

Leave an answer