Conseils pour masquer un menu mobile dans WordPress

Dans la plupart des cas, les thèmes WordPress ont déjà des styles définis qui leur permettent de transformer un menu de navigation classique en menu mobile. C'est pratique si vous avez besoin d'une solution rapide prête à l'emploi. Par exemple, vous avez une mise en page traditionnelle pour les ordinateurs de bureau et un menu hamburger sur les appareils mobiles. Cependant, si vous souhaitez personnaliser davantage ou même remplacer complètement votre menu mobile existant, c'est également possible. Il existe plusieurs façons de masquer un menu mobile dans WordPress, soit avec des plugins, soit avec du code .

Comment masquer un menu mobile dans WordPress

La personnalisation complète du site Web nécessite un peu de connaissances et d'expérience. Si vous souhaitez avoir une personnalisation sûre et sans risque, vous pouvez faire appel à des professionnels pour personnaliser et entretenir votre site Web. Bien qu'il existe certaines parties faciles que vous pouvez faire vous-même, une personnalisation plus sérieuse nécessite une touche professionnelle. En ce qui concerne le menu mobile de WordPress, vous pouvez utiliser des plugins pour simplifier le processus . Ou, si vous avez des connaissances en codage, vous pouvez créer des modifications directement dans le code.

Pour vous aider à changer la façon dont le menu mobile apparaît sur votre site Web, voici les deux façons les plus courantes de le compléter :

• Masquer un menu mobile dans WordPress avec un plugin
• Masquer le menu mobile avec le code CSS

Comment masquer un menu mobile dans WordPress avec un plugin

Vous avez probablement trouvé un thème WordPress avec un comportement de menu mobile intéressant, et souhaitez le reproduire facilement. Cette méthode ne nécessite pas de connaissances en codage, elle est donc plus pratique pour cette tâche. Après avoir installé un plugin, vous pourrez supprimer complètement votre menu mobile sur les appareils mobiles . Aussi, certains plugins vous permettront de le personnaliser en profondeur. Outre le masquage de base, vous pouvez également l'utiliser pour supprimer uniquement des éléments spécifiques de votre menu.

Création d'un nouveau menu mobile

La première étape consiste à aller dans Apparence>Menus . Là, vous pourrez créer un nouveau menu en cliquant sur l'option "créer un nouveau menu" en haut. Donnez un nom à votre nouveau menu et confirmez-le avec le bouton "Créer un menu" dans le coin inférieur droit de l'écran.

Après ces étapes, la sélection sur le côté gauche ne sera plus impossible à cliquer et vous pourrez ajouter des éléments pour votre nouveau menu. Lorsque vous avez terminé d'ajouter de nouveaux éléments, cliquez simplement sur "Enregistrer le menu" .

Trouver et installer un plugin

L'étape suivante consiste à trouver et à installer un plugin. Il existe de nombreux plugins qui peuvent vous aider à manipuler et personnaliser les menus . Certains des plus populaires sont WP Mobile Menu, Max Mega Menu, Responsive Menu, etc. Par souci d'explication, installons et activons WP Mobile Menu.

Une fois que vous avez terminé, accédez aux options du menu mobile dans la barre latérale gauche de WordPress. Dans les options du plugin, vous pouvez désormais choisir si vous souhaitez afficher votre nouveau menu mobile à gauche ou à droite. Sélectionnez le menu créé précédemment, puis faites défiler jusqu'à "Masquer le menu du thème d'origine" . Là, vous pouvez choisir de supprimer des éléments spécifiques du menu d'origine. Si vous cliquez sur le champ "Rechercher un élément", vous obtiendrez un aperçu en direct des sélections parmi lesquelles choisir. Une fois le processus de sélection terminé, enregistrez simplement les modifications.

Remplacer ou masquer le menu

Après avoir choisi ce que vous souhaitez masquer, revenez simplement à Apparence>Menus . Sélectionnez dans un menu déroulant votre menu mobile précédemment créé et définissez son « emplacement d'affichage » . Votre menu d'origine est maintenant masqué et remplacé par votre menu personnalisé.

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 à la place un menu personnalisé.

Comment masquer le menu avec le code CSS

Une autre méthode pour masquer le menu mobile nécessite une certaine connaissance du code et des pratiques CSS . Les personnes qui créent souvent des thèmes WordPress personnalisés savent déjà à quel point certaines personnalisations peuvent être complexes. Et, compte tenu de ces points, ce n'est pas exactement la méthode recommandée pour les débutants. Néanmoins…

Trouvez le nom de votre menu

La première étape consiste à trouver le menu que vous souhaitez modifier. Le moyen le plus simple consiste probablement à utiliser des outils de développement de navigateur intégrés . Accédez à votre site Web sur lequel vous souhaitez apporter des modifications et ouvrez les outils de développement. Si vous utilisez Google Chrome, vous pouvez le faire avec le raccourci Ctrl+Maj+I . En haut de l'écran, vous trouverez l'option Basculer la barre d'outils de l'appareil qui vous montrera à quoi ressemble votre site Web sur les appareils mobiles. Vous pouvez même modifier différents types et résolutions.

Maintenant que vous voyez comment il s'affiche sur les appareils mobiles, sélectionnez le bouton en forme de flèche et cliquez sur votre menu pour l'inspecter. Cela vous mènera immédiatement à la partie du code où vous pouvez voir la classe CSS pour un menu donné. Autrement dit, vous verrez ce nom de classe.

Masquez votre menu avec une nouvelle ligne de code

Après avoir acquis le nom propre, allez simplement dans Apparence> Personnaliser et sélectionnez "CSS supplémentaire" . En général, cela se trouve généralement en bas de la barre latérale gauche. Cliquez dessus et l'écran suivant s'affichera. Là, vous pouvez cliquer sur le bas de l'écran pour sélectionner la vue mobile et, au-dessus, vous saisirez le code pour masquer le menu :

Code : .menu-name {affichage : aucun ;}

Enfin, cliquez sur le bouton Publier et vous avez terminé. Si vous êtes un peu plus familier avec le code CSS, bon nombre de ces modifications peuvent être effectuées dans le fichier CSS. Cependant, vous devrez faire attention aux requêtes des médias. Ils vous permettront de créer différentes règles pour différents appareils, afin que vous puissiez avoir plus de contrôle sur vos sites Web et le comportement des menus.

Si vous êtes un débutant dans l'édition de mise en page, l'option plugin est probablement la meilleure façon de commencer. Si vous commencez à modifier le code sans savoir exactement ce que vous faites, vous pouvez facilement casser l'apparence de votre site Web. Il existe de nombreuses règles et propriétés dans CSS qui s'écrasent les unes les autres. Ainsi, si vous souhaitez masquer votre menu mobile dans WordPress sans risque, utilisez des plugins pour faire le travail à votre place .