[Total : 1   Moyenne : 5/5]

Bootstrap Navwalker est depuis des années un grand classique pour les développeurs de thème WordPress.
Pour un site qui propose un menu avec plusieurs niveaux, menu et sous-menu, il présente néanmoins un défaut bloquant : les liens de premier niveau, aussi appelés éléments parents, ne sont pas cliquables.
Voici comment résoudre ce problème.

 

Télécharger et installer Bootstrap Navwalker

Commencez par télécharger et intégrer Bootstrap Navwalker dans votre thème WordPress en suivant les explications sur le GitHub de l’auteur : https://github.com/twittem/wp-bootstrap-navwalker

 

Rendre cliquable le lien de menu parent dépliable

Ajoutez la bonne URL au lien en changeant la ligne 188 du fichier wp-bootstrap-navwalker.php en modifiant :

$atts['href'] = '#';

et remplacez pour obtenir :

$atts['href'] = ! empty( $item->url ) ? $item->url : '';

 

modifiez également la ligne 189 :

$atts['data-toggle'] = 'dropdown';

en remplaçant par :

$atts['data-hover'] = 'dropdown';

 

Ajoutez ensuite ceci à votre fichier CSS afin d’afficher le sous-menu au survol de l’élément parent uniquement sur les écrans supérieurs à égaux à 992px (ordinateurs) :

@media(min-width: 992px){
     .dropdown:hover .dropdown-menu {
           display: block;
     }
}

 

Ce code en jQuery permet de rendre les liens parents non cliquables uniquement sur les appareils mobiles : tablettes et smartphones. Ajoutez le à votre fichier JavaScript.

jQuery(function($) {
  // Bootstrap menu magic
  $(window).resize(function() {
    if ($(window).width() < 992) {
      $(".dropdown-toggle").attr('data-toggle', 'dropdown');
    } else {
      $(".dropdown-toggle").removeAttr('data-toggle dropdown');
    }
  });});
Rendre les liens parents non cliquables sur tablettes et smartphone (menu mobile)

 

Choisissez plutôt ce code jQuery si vous souhaitez tout de même conserver les liens parents cliquables sur les appareils mobiles : tablettes et smartphone.

jQuery(function($) {
  if($(window).width() < 992) {
     $(".dropdown-toggle").attr('data-toggle', 'dropdown');   $('.dropdown').on('show.bs.dropdown', function () {
   $(this).siblings('.open').removeClass('open').find('a.dropdown-toggle').attr('data-toggle', 'dropdown');
   $(this).find('a.dropdown-toggle').removeAttr('data-toggle');
     });
  } 
});
Conserver les liens de menu parents cliquables et utilisables en menu mobile : tablettes et smartphones

 

Et c’est gagné !