Comment masquer un menu mobile dans WordPress (Guide du débutant)

Voulez-vous masquer un menu mobile dans WordPress ?

La plupart des thèmes WordPress transforment automatiquement vos menus de navigation par défaut en menus adaptés aux mobiles. Cependant, vous souhaiterez peut-être afficher un menu différent aux personnes qui visitent votre site à l’aide d’un smartphone ou d’une tablette.

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

Nous aborderons deux méthodes différentes dans ce didacticiel, 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

Le moyen le plus simple de masquer le menu mobile fourni par votre thème WordPress consiste à utiliser WP Mobile Menu.

Ce plugin vous permet de créer un menu unique puis de le montrer aux utilisateurs mobiles. Vous pouvez également masquer le menu mobile fourni par défaut par de nombreux thèmes.

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 de votre tableau de bord WordPress.

Sur l'écran suivant, vous devez saisir un nom pour le menu. C'est une bonne idée d'utiliser quelque chose qui vous aidera à identifier le menu plus tard, comme « Menu mobile ».

Après cela, vous pouvez sélectionner toutes les publications 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 configuration du menu, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.

Ceci 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 la façon d'installer un plugin WordPress.

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

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

Ensuite, ouvrez la liste déroulante « 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 d’affiner l’apparence du menu mobile. Par exemple, vous pouvez sélectionner « Options de police », puis modifier la taille de la police, l'épaisseur, 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 collant, etc.

La plupart de ces paramètres sont simples, vous pouvez donc les parcourir et voir quels différents types d'effets vous pouvez créer.

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

Maintenant que vous avez configuré le plugin, l'étape suivante consiste à indiquer à WordPress où afficher le menu mobile en accédant à Apparence » Menus.

S'il n'est pas déjà sélectionné, ouvrez la liste déroulante « 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 « Menu mobile de gauche » ou « Menu mobile de droite », 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 un ordinateur. Vous devriez voir le menu mobile personnalisé.

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

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

Ici, cliquez sur le bouton « Rechercher un é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, comme le menu fourni par votre thème WordPress.

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

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 du code CSS

Cette méthode est un peu avancée et vous oblige à ajouter 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, comme des liens de navigation fil d'Ariane ou des images interactives.

Tout d’abord, vous devez identifier l’élément que vous devrez modifier. Pour ce faire, accédez simplement à votre site Web WordPress et passez la souris sur le menu de navigation.

Après cela, cliquez avec le bouton droit et sélectionnez l’outil Inspecter de votre navigateur.

L’écran de votre navigateur sera désormais divisé en deux et vous verrez le code de la page Web.

Cependant, ce menu de navigation n’est pas celui que nous devons cibler puisque nous pouvons le voir sur l’écran du bureau.

Heureusement, il existe un moyen simple d’afficher le menu mobile.

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

Maintenant, vous devez déterminer l'identifiant et la classe CSS utilisés par le menu de navigation mobile. Déplacez simplement votre souris sur le code source jusqu'à ce que votre navigateur mette en surbrillance la zone de menu.

Une fois que vous disposez de ces informations, vous pouvez masquer le menu sur les appareils mobiles à l’aide d’un 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 provoquer toutes sortes d’erreurs WordPress courantes. Le code personnalisé peut même complètement détruire votre site Web.

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

Ce plugin gratuit facilite l'ajout de CSS, PHP, HTML personnalisés et bien 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 cliquant sur un bouton.

Pour commencer, vous devrez installer et activer WPCode. Pour plus d'informations, consultez notre guide étape par étape sur la façon d'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édéfinis 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 généralement pas en charge, de désactiver les pages de pièces jointes et bien plus encore.

Pour ajouter du CSS à votre site, survolez simplement « Ajouter votre code personnalisé », puis sélectionnez « Utiliser l'extrait ».

Pour commencer, saisissez un titre pour l’extrait de code. Cela peut être tout ce qui vous aide à identifier l'extrait dans votre tableau de bord WordPress.

Cela fait, ouvrez le menu déroulant « Type de code » et choisissez « CSS ».

Après cela, vous pouvez coller ou saisir 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 obtenu de votre propre thème WordPress.

Lorsque vous êtes prêt à publier l'extrait de code, faites défiler vers le 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 vivant.

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 de manière sélective les éléments que vous ne souhaitez pas afficher 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 et cliquez sur le bouton « Options d'é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 des éléments de menu, vous verrez l'option permettant d'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 tous 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.

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

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

Maintenant, vous pouvez 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 l’extrait de code.

Désormais, si vous visitez votre blog WordPress, vous verrez que les éléments de menu que vous souhaitiez masquer sur le bureau ne sont plus visibles.

Pour tester l’apparence du menu sur mobile, réduisez simplement l’écran du navigateur jusqu’à ce que WordPress passe au menu mobile.

Nous espérons que cet article vous a aidé à apprendre à masquer facilement un menu mobile dans WordPress. Vous voudrez peut-être également consulter nos choix d’experts pour les meilleurs créateurs de pages WordPress par glisser-déposer et notre guide sur la façon de choisir le meilleur logiciel de conception de sites Web.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.