Comment masquer un menu mobile dans WordPress (Guide pour débutants)

La navigation mobile peut faire ou défaire l'expérience utilisateur de votre site WordPress. Et chez WPBeginner, nous avons découvert que les paramètres par défaut du menu mobile ne correspondent pas toujours à ce que nos utilisateurs souhaitent réaliser sur leurs sites web.

Bien que les thèmes WordPress fassent un bon travail de conversion des menus de bureau en versions adaptées aux mobiles, cette conversion automatique n'est pas toujours la meilleure solution.

Nos utilisateurs ont souvent besoin d'afficher différentes options de navigation pour leurs visiteurs mobiles, que ce soit pour la simplicité, des promotions spéciales ou des taux de conversion améliorés.

Dans cet article, nous vous montrerons comment masquer facilement le menu mobile par défaut dans WordPress afin que vous puissiez afficher un menu personnalisé à la place.

Nous couvrirons deux méthodes différentes dans ce tutoriel, et vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :

• Méthode 1 : Masquer un menu mobile dans WordPress à l'aide d'un plugin
• Méthode 2 : Masquer le menu mobile à l'aide de code CSS

Méthode 1 : Masquer un menu mobile dans WordPress à l'aide d'un plugin

La manière la plus simple de masquer le menu mobile fourni par votre thème WordPress est d'utiliser le plugin WP Mobile Menu.

Ce plugin vous permet de créer un menu unique, puis de l'afficher aux utilisateurs mobiles. Vous pouvez également masquer le menu mobile que de nombreux thèmes fournissent par défaut.

Créez votre menu mobile

Tout d'abord, vous devez créer le menu de navigation que vous souhaitez afficher sur les appareils mobiles. Pour commencer, rendez-vous sur la page Apparence » Menus dans votre tableau de bord WordPress.

Sur l'écran suivant, vous devez saisir un nom pour le menu. Il est conseillé d'utiliser quelque chose qui vous aidera à identifier le menu plus tard, comme « Menu Mobile ».

Après cela, vous pouvez sélectionner tous les articles et pages que vous souhaitez ajouter au menu mobile.

Pour des instructions plus détaillées, consultez notre guide sur la façon de créer un menu de navigation dans WordPress.

Lorsque vous êtes satisfait de la disposition du menu, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour sauvegarder vos modifications.

Configurer les paramètres du plugin

Une fois cela fait, il est temps d'installer et d'activer le plugin WP Mobile Menu. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur Options du menu mobile pour configurer les paramètres du plugin.

Ici, vous devez faire défiler jusqu'en bas de la page et choisir si vous souhaitez afficher le menu mobile sur le côté gauche ou droit de l'écran à l'aide des commutateurs « Activer le menu gauche/droit ».

Ensuite, ouvrez le menu déroulant « Choisir un menu » et sélectionnez le menu mobile que vous avez créé précédemment.

Après cela, cliquez simplement sur « Enregistrer les modifications ».

Il existe de nombreuses façons de styliser votre menu de navigation WordPress. Par exemple, vous pouvez sélectionner « Options de police », puis modifier la taille de la police, le poids, l'espacement, etc.

Vous pouvez également sélectionner « Style d'en-tête » et modifier l'apparence et le comportement de l'en-tête mobile.

Par exemple, vous pouvez ajouter une ombre, modifier la hauteur de l'en-tête, créer un menu de navigation fixe, et plus encore.

La plupart de ces paramètres sont simples, vous pouvez donc les parcourir et voir quels types d'effets vous pouvez créer. Par exemple, vous pouvez ajouter une icône d'image ou ajouter du CSS à vos menus WordPress.

Lorsque vous êtes satisfait de la configuration du menu mobile, cliquez simplement sur « Enregistrer les modifications ».

Ajoutez votre menu mobile à WordPress

Maintenant que vous avez configuré le plugin, la prochaine étape consiste à indiquer à WordPress où afficher le menu mobile en allant dans Apparence » Menus.

Si ce n'est pas déjà sélectionné, ouvrez le menu déroulant « Sélectionner un menu à modifier » et choisissez le menu mobile que vous avez créé précédemment.

Ensuite, sous « Paramètres du menu », vous devez sélectionner soit « Menu mobile gauche », soit « Menu mobile droit », selon l'endroit où vous souhaitez afficher le menu.

Après cela, cliquez simplement sur « Enregistrer le menu ».

Maintenant, visitez votre site web sur un appareil mobile ou affichez la version mobile de votre site WordPress depuis votre ordinateur. Vous devriez voir le menu mobile personnalisé.

Dépannage : Comment masquer le menu mobile par défaut

Par défaut, le plugin masque automatiquement les éléments de menu utilisés par la plupart des thèmes WordPress populaires. Cela signifie que le menu mobile par défaut de votre thème devrait être masqué sans que vous ayez à faire quoi que ce soit.

Cependant, si le menu mobile par défaut apparaît toujours, vous devrez aller dans Options du menu mobile » Options générales » Options de visibilité dans le tableau de bord WordPress.

Ici, cliquez sur le bouton « Trouver l'élément ».

Cela ouvre une version mobile de votre site web.

Dans cette fenêtre contextuelle, cliquez pour sélectionner le contenu que vous souhaitez masquer sur les appareils mobiles, tel que le menu fourni par votre thème WordPress.

Cela ajoute la classe CSS du contenu au champ « Masquer les éléments ».

Une fois cela fait, cliquez sur « Enregistrer les modifications ». Désormais, le menu du thème ne devrait plus apparaître sur les appareils mobiles.

Méthode 2 : Masquer le menu mobile à l'aide de code CSS

Cette méthode est un peu avancée et nécessite que vous ajoutiez du code personnalisé à votre site web.

Pour cette méthode, vous pouvez choisir entre deux approches différentes. Vous pouvez masquer l'intégralité du menu mobile par défaut à l'aide de CSS, ou masquer des éléments de menu individuels sur les appareils mobiles.

1. Masquer un menu complet sur les appareils mobiles à l'aide de CSS

Une option consiste à supprimer complètement le menu mobile par défaut de votre thème WordPress. C'est un bon choix si vous souhaitez utiliser une méthode de navigation différente sur mobile, telle que les liens de navigation fil d'Ariane ou les images interactives.

Tout d'abord, vous devez trouver l'élément que vous devez modifier. Pour ce faire, accédez simplement à votre site Web WordPress et placez le curseur de la souris sur le menu de navigation.

Après cela, faites un clic droit et sélectionnez l'outil d'inspection de votre navigateur.

L'écran de votre navigateur sera maintenant divisé en deux, et vous verrez le code de la page, y compris le code du menu de navigation.

Cependant, nous ne voulons pas modifier ce menu de navigation car nous pouvons le voir sur l'écran de bureau.

Heureusement, il existe un moyen simple d'accéder au menu mobile à la place.

Il suffit de faire glisser le coin du navigateur pour le réduire jusqu'à ce que WordPress remplace le menu de navigation de bureau par le menu mobile.

Maintenant, vous devez trouver l'identifiant et la classe CSS utilisés par le menu de navigation mobile. Placez simplement votre souris sur le code source jusqu'à ce que votre navigateur mette en surbrillance la zone du menu. Cette section contient la classe et l'identifiant que vous devez utiliser.

Une fois que vous avez ces informations, vous pouvez masquer le menu sur les appareils mobiles à l'aide de code.

Souvent, les guides WordPress vous demanderont d'ajouter du code personnalisé à votre fichier functions.php. Cependant, ce n'est pas très convivial, et même une petite erreur dans le code peut causer toutes sortes d'erreurs WordPress courantes. Le code personnalisé peut même casser complètement votre site web.

Au lieu de cela, il est plus sûr d'ajouter du code personnalisé à l'aide de WPCode.

Ce plugin gratuit permet d'ajouter facilement du CSS personnalisé, du PHP, du HTML, et plus encore à WordPress sans mettre votre site en danger. Vous pouvez simplement coller le code du plugin dans l'éditeur de WPCode, puis activer et désactiver le code en un clic.

Pour commencer, vous devrez installer et activer WPCode. Pour plus d'informations, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après cela, accédez à Extraits de code » Ajouter un extrait dans le tableau de bord WordPress.

Ici, vous verrez tous les extraits pré-faits que vous pouvez ajouter à votre site. Cela inclut un extrait qui vous permet de désactiver complètement les commentaires, de télécharger des types de fichiers que WordPress ne prend pas en charge habituellement, désactiver les pages de pièces jointes, et bien plus encore.

Pour ajouter du CSS personnalisé à votre site, survolez simplement « Ajouter votre code personnalisé » puis cliquez sur le bouton « + Ajouter un extrait de code ».

Ensuite, sélectionnez « Extrait CSS » comme type de code dans la liste des options qui apparaissent à l'écran.

Cela vous amènera à la page Créer un extrait personnalisé.

Pour commencer, tapez un titre pour l'extrait de code. Cela peut être n'importe quoi qui vous aide à identifier l'extrait dans votre tableau de bord WordPress.

Après cela, vous pouvez coller ou taper le code suivant dans l'éditeur de code :

.navbar-toggle-wrapper {
display:none;
}

N'oubliez pas de remplacer .navbar-toggle-wrapper par l'identifiant que vous avez trouvé à l'aide de l'outil Inspecter de votre navigateur.

Lorsque vous êtes prêt à publier l'extrait de code, faites défiler jusqu'en haut de l'écran et cliquez sur le bouton « Inactif » pour qu'il devienne « Actif ».

Enfin, cliquez sur ‘Enregistrer l'extrait’ pour rendre l'extrait actif.

Désormais, le menu mobile de votre thème sera masqué sur les smartphones et les tablettes.

2. Masquer des éléments de menu spécifiques dans le menu mobile à l'aide de CSS

Cette méthode vous permet de créer un menu de navigation, puis d'afficher ou de masquer sélectivement les éléments que vous ne souhaitez pas voir apparaître sur les appareils mobiles ou de bureau.

De cette façon, vous pouvez utiliser le même menu de navigation pour les visiteurs mobiles et de bureau. Tout d'abord, allez dans Apparence » Menus.

Une fois cela fait, cliquez sur le bouton « Options de l'écran » dans le coin supérieur droit de l'écran.

À partir de là, vous devez cocher la case à côté de l'option « Classes CSS ».

Après cela, faites défiler jusqu'à un élément de menu que vous souhaitez masquer sur mobile et cliquez pour le développer.

Dans les paramètres de l'élément de menu, vous verrez l'option pour ajouter une classe CSS. Ici, allez-y simplement et ajoutez une classe CSS .hide-mobile.

Répétez le processus pour tous les éléments de menu que vous souhaitez masquer sur mobile.

De même, vous pouvez cliquer sur les éléments de menu que vous souhaitez masquer sur les ordinateurs de bureau. Cependant, cette fois, ajoutez la classe CSS .hide-desktop à la place.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.

Une fois cela fait, vous êtes prêt à masquer ces éléments de menu à l'aide de CSS personnalisé. Créez simplement un nouveau fragment de code personnalisé en suivant le même processus décrit ci-dessus.

Vous pouvez maintenant ajouter le CSS suivant à l'éditeur de code WPCode :

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

Après cela, publiez simplement le fragment de code.

Maintenant, si vous visitez votre blog WordPress, vous verrez que les éléments de menu que vous vouliez masquer sur ordinateur ne sont plus visibles. Pour tester l'apparence du menu sur mobile, réduisez simplement la taille de l'écran du navigateur jusqu'à ce que WordPress passe au menu mobile.

Nous espérons que cet article vous a aidé à apprendre comment masquer facilement un menu mobile dans WordPress. Vous voudrez peut-être aussi consulter nos meilleurs choix d'experts pour les meilleurs constructeurs de pages WordPress par glisser-déposer et notre guide sur comment ajouter une logique conditionnelle aux menus.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.