Comment masquer un menu version mobile sur WordPress ?

Vous aimeriez masquer un menu mobile dans votre site  WordPress ? La plupart des thèmes WordPress sont livrés avec des styles intégrés qui transforment automatiquement vos menus de navigation en un menu mobile. Cependant, il se peut que vous souhaitiez utiliser un style de menu différent, plus personnel. Dans cet article, nous allons vous montrer comment masquer facilement un menu mobile dans WordPress à l’aide d’un plugin ou d’une méthode de code.

Comment masquer un menu mobile dans WordPress avec un plugin ?

Cette méthode est plus simple et est recommandée pour les débutants. Nous utiliserons un plugin pour masquer votre menu mobile existant fourni par votre thème WordPress, puis utiliserons un menu différent ou aucun menu du tout sur les appareils mobiles. Tout d’abord, vous devez visiter le Apparence »Menus et créez un nouveau menu de navigation que vous souhaitez afficher sur les appareils mobiles.

Sur l’écran suivant, vous devez fournir un nom pour votre nouveau menu. Cela vous aidera à l’identifier plus tard. Nous l’appellerons «Menu mobile». Après cela, vous pouvez sélectionner les éléments que vous souhaitez ajouter à votre menu dans la colonne de gauche.

Utiliser un plugin pour masquer un menu mobile WordPress

Une fois que vous avez terminé d’ajouter des éléments à votre menu, n’oubliez pas de cliquer sur le bouton Enregistrer le menu pour enregistrer votre menu. Ensuite, vous devez installer et activer le plugin WP Mobile Menu.

Lors de l’activation, vous devez visiter Options du menu mobile pour configurer les paramètres du plugin. À partir de là, vous devez sélectionner si vous souhaitez afficher votre menu mobile à droite ou à gauche en activant la bascule.

Dans le menu déroulant, sélectionnez le menu mobile que vous avez créé précédemment. Ensuite, vous devez faire défiler jusqu’à la section \`\` Masquer le menu du thème d’origine  ». C’est ici que vous pouvez demander au plugin de masquer un menu mobile créé par votre thème WordPress.

Enregistrer ses modifications, une étape importante

Par défaut, le plugin utilisera les identifiants d’élément couramment utilisés utilisés par les thèmes WordPress les plus populaires. La plupart des utilisateurs n’auraient rien besoin de faire ici. Cependant, si le plugin ne parvient pas à masquer le menu de votre thème, vous pouvez revenir ici et cliquer sur le bouton \`\` Rechercher un élément  » pour pointer simplement vers le menu de navigation de votre thème.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer vos paramètres. Maintenant que nous avons configuré le plugin, nous devons dire au site WordPress d’afficher notre menu mobile dans le nouvel emplacement de menu ajouté par le plugin.

Allez simplement sur la page  Apparence »Menus. Assurez-vous que le menu mobile que vous avez créé précédemment est sélectionné dans le menu déroulant. Sous votre élément de menu, choisissez l’emplacement que vous avez sélectionné dans les paramètres du plugin (par exemple, menu mobile gauche ou menu mobile droit).

Vous pouvez maintenant visiter votre site Web pour voir votre nouveau menu en action. Le plugin va maintenant masquer le menu mobile de votre thème et afficher un menu personnalisé à la place. Le plugin WP Mobile Menu vous permet de changer la couleur de la barre de menus, de changer l’opacité, d’ajouter des icônes et plus encore dans les paramètres. N’hésitez pas à jouer avec ces paramètres.

Comment masquer le menu mobile à l’aide du code CSS ?

Cette méthode est un peu avancée et nécessite l’utilisation de CSS personnalisés.

Pour cette méthode, vous pouvez choisir d’utiliser deux approches différentes. Vous pouvez simplement masquer un menu mobile complet en utilisant CSS, ou vous pouvez masquer des éléments de menu individuels sur les appareils mobiles.

Masquer un menu complet sur les appareils mobiles à l’aide de CSS

Tout d’abord, vous devez déterminer l’élément que vous devez modifier à l’aide de CSS personnalisé. Pour ce faire, rendez-vous simplement sur votre site Web et passez la souris sur votre menu de navigation. Après cela, cliquez avec le bouton droit de la souris et sélectionnez l’outil Inspecter.

L’écran de votre navigateur sera divisé en deux et vous verrez le code source de votre page Web. Désormais, ce menu de navigation n’est pas celui que vous devez cibler car il est visible sur l’écran du bureau.

Vous devez réorganiser l’écran de votre navigateur en le faisant glisser du coin vers une taille plus petite jusqu’à ce que le menu de navigation du bureau soit remplacé par le menu mobile.

Vous devez déterminer l’identifiant et la classe CSS utilisés par votre menu de navigation WordPress. Vous pouvez le faire en déplaçant votre souris sur le code source jusqu’à ce que la zone de menu soit en surbrillance.

Comme vous pouvez le voir dans la capture d’écran ci-dessus, notre thème de test utilise le navbar-toggle-wrapper classer.

Après cela, vous devez aller à Apparence »Personnaliser dans la zone d’administration de WordPress pour lancer le personnalisateur de thème. Ici, vous devez passer à l’onglet ‘CSS supplémentaire’ et cliquer sur l’icône mobile dans le coin inférieur droit du panneau de gauche.

Le personnalisateur affichera maintenant un aperçu de l’apparence de votre site sur les appareils mobiles. Vous pouvez maintenant saisir le code CSS suivant et voir votre menu mobile disparaître dans le panneau de prévisualisation.

N’oubliez pas de remplacer le .navbar-toggle-wrapper par l’identifiant utilisé par votre thème WordPress.

Après cela, cliquez sur le bouton «Publier» en haut pour enregistrer vos modifications.

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. L’avantage de cette méthode est que vous pouvez utiliser le même menu de navigation pour le mobile et le bureau et simplement masquer les éléments que vous ne voulez pas voir.

Tout d’abord, vous devez aller à Apparence »Menus et cliquez sur le bouton Options d’écran dans le coin supérieur droit de l’écran. De là, vous devez cocher la case à côté de l’option «Classes CSS».

Après ça. vous devez faire défiler jusqu’à un élément de menu que vous souhaitez masquer sur les appareils mobiles et cliquer pour le développer. Dans les paramètres des éléments de menu, vous verrez maintenant l’option d’ajouter une classe CSS. Allez-y et ajoutez .hide-mobile Classe CSS là-bas.

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

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

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

Nous allons maintenant ajouter du CSS personnalisé pour masquer ces éléments de menu. Allez simplement sur la page Apparence »Personnaliser pour lancer le personnalisateur de thème et cliquez sur l’onglet CSS supplémentaire.

Vous devez ajouter le code CSS suivant dans la zone CSS.

N’oubliez pas de cliquer sur le bouton Publier pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web et vous remarquerez que les éléments que vous vouliez masquer sur le bureau ne sont plus visibles dans le menu. Ajustez l’écran de votre navigateur à une taille plus petite et vous remarquerez la même chose pour le menu mobile.

Comment masquer un menu mobile dans WordPress : notre conclusion

Nous espérons que cet article vous a aidé à apprendre à masquer facilement un menu mobile dans WordPress. Vous pouvez également consulter notre article sur l’intégration de code iFrame dans WordPress ainsi que sur la modification de l’ordre de vos catégories !