Comment masquer un menu mobile dans WordPress (étape par étape)

Dans WordPress, si vous cherchez à masquer les menus du mobile, continuez à lire ce blog

Vous constaterez que la plupart des thèmes WordPress sont alimentés par des styles intégrés, ce qui vous aidera à convertir automatiquement le menu de navigation en un menu mobile.

Sur votre téléphone mobile, vous ne souhaiterez peut-être pas utiliser un menu similaire, car vous recherchez peut-être des styles de menu différents à afficher sur vos téléphones mobiles.

Vous trouverez ci-dessous deux méthodes différentes pour masquer un menu mobile dans WordPress :

Méthode 1 : Masquer les menus mobiles avec le plugin WordPress

Pour les débutants, la méthode 1 est recommandée car ils n'ont pas besoin de jouer avec le codage, ils ont juste besoin d'utiliser des plugins pour masquer le menu mobile qui est fourni par défaut par le thème WordPress.

Après l'avoir masqué, ils peuvent utiliser divers menus ou choisir de n'afficher aucun menu sur les appareils mobiles.

Pour utiliser le plugin WordPress, le débutant doit d'abord se connecter au tableau de bord WordPress, puis cliquer sur l'apparence, puis sur la page de menu. Ici, ils peuvent créer un nouveau menu de navigation pour le présenter sur des appareils portables.

Vous trouverez maintenant un autre écran où vous avez un nouveau nom de menu afin que vous puissiez le reconnaître en cas de besoin. Considérez que vous avez ajouté le nom en tant que "menu du téléphone". Vous pouvez maintenant choisir l'article.

Une fois que vous avez ajouté les éléments au menu, il est maintenant temps de cliquer sur le bouton Enregistrer le menu.

Maintenant, à partir du référentiel de plugins WordPress, vous pouvez choisir un menu WP Mobile - et le télécharger. Ou vous pouvez installer ce plugin directement depuis votre tableau de bord WordPress.

Vous devrez vous rendre sur la page du menu mobile lors de l'activation pour configurer les paramètres du plug-in.
Maintenant, ici, vous trouverez une option pour rendre le menu de votre téléphone à gauche ou à droite. Vous pouvez activer ou désactiver l'option b.

Sélectionnez maintenant le menu du téléphone que nous avons créé précédemment dans le menu déroulant.

Maintenant, faites défiler la page vers le bas jusqu'à ce que vous obteniez une option pour "masquer le menu du thème d'origine". Maintenant, cette option vous aidera à indiquer au plugin que le menu mobile du thème WordPress doit être masqué.

Par défaut, les éléments les plus utilisés identifiés par les thèmes WordPress adaptés aux mobiles seront utilisés par les plugins. La plupart des utilisateurs du site Web n'auront rien à faire ici.

Supposons que le plugin que vous utilisez ne puisse pas masquer un menu mobile de vos thèmes, vous pouvez alors visiter à nouveau la même page et cliquer avec la souris sur "trouver un élément" pour pointer vers le menu de navigation de votre thème.

Pour stocker tous vos paramètres, n'oubliez pas d'enregistrer les modifications.

Maintenant que nous avons configuré à l'aide du plugin, vous devez indiquer à votre site Web qu'il doit afficher le menu du téléphone qui est ajouté par le plugin à un nouvel emplacement de menu.

Pour faire ça:

Accédez à l'apparence et cliquez sur la page de menu.

Assurez-vous que dans le menu déroulant, le menu du téléphone que vous avez créé est correctement sélectionné. Sélectionnez maintenant l'emplacement sous l'élément de menu, c'est-à-dire le menu mobile droit ou le menu mobile gauche.

Vérifiez maintenant si le nouveau menu est visible sur votre site Web ou non. Cependant, le plugin que nous utilisions ne présentera pas le menu mobile de votre thème mais il présentera celui que nous avons créé, c'est-à-dire le menu du téléphone.

Le plugin que nous avons suggéré, c'est-à-dire le plugin de menu mobile WP, vous aidera à changer la couleur de la barre de menus, à ajouter plus d'icônes, à changer l'opacité et bien plus encore dans les paramètres. Vous pouvez facilement et librement utiliser ces options de paramètres.

Méthode 2 : à l'aide de code, masquer le menu mobile

Lorsque vous choisissez cette méthode pour masquer un menu mobile, assurez-vous d'avoir de l'expérience dans le codage ou au moins de connaître certains CSS personnalisés.

Pour cette méthode, vous aurez deux approches différentes. Soit vous pouvez rendre le menu mobile complet invisible à l'aide de CSS, soit vous pouvez rendre des éléments individuels invisibles sur les appareils mobiles.

Rendez votre menu complet invisible sur les petits appareils avec CSS

Les éléments que vous cherchez à modifier à l'aide d'un code CSS personnalisé doivent être compris. Pour ce faire, vous devrez d'abord visiter votre site Web, puis cliquer sur le menu de navigation. Maintenant, faites un clic droit dessus et choisissez un outil d'inspection.

Vous trouverez maintenant les deux écrans différents. Un écran affichera votre site Web tandis qu'un autre écran affichera le code source. Cependant, vous devez ajuster l'écran du navigateur à une taille plus petite, sauf si le menu de navigation de votre bureau n'est pas remplacé par le menu mobile.

Maintenant, le CSS et les identifiants utilisés par le menu de navigation de votre site Web WordPress doivent être compris. En déplaçant votre souris sur le code source de votre site Web, vous pouvez mettre en surbrillance la zone de menu.

• Accédez maintenant au tableau de bord WordPress.
• Cliquez sur l'apparence
• Accédez à l'option de personnalisation de la page pour lancer le personnalisateur de thème.
• Vous pouvez maintenant revenir à l'onglet "CSS supplémentaire" et dans le coin droit de votre panneau d'administration, cliquez sur l'icône mobile.

Un personnalisateur vous montrera un aperçu de l'apparence de votre site Web sur les téléphones. Le code CSS mentionné ci-dessous doit être ajouté et dans le panneau de prévisualisation, le menu mobile disparaîtra.

.navbar-toggle-wrapper { 
affichage : aucun ; 
}

Assurez-vous d'avoir remplacé le .nav-toggle-wrapper par l'identifiant utilisé par votre thème WordPress.
En haut, cliquez sur le "bouton Publier" pour enregistrer toutes les modifications.

Rendre un menu spécifique invisible sur votre mobile en utilisant CSS

Il s'agit de la deuxième approche pour masquer un menu mobile. Dans cette approche, il vous sera demandé de créer un menu de navigation, puis de rendre le menu mobile visible ou invisible sur votre ordinateur de bureau ou vos appareils mobiles.

L'avantage d'utiliser une telle méthode est que vous pouvez utiliser un menu de navigation similaire pour masquer les menus sur les ordinateurs de bureau ou les téléphones mobiles.

• Dans le tableau de bord WordPress
• Aller à l'apparence
• Cliquez sur la page des menus
• Appuyez sur le bouton d'option de l'écran
• Juste à côté des options "classes CSS", cochez la case.

Jusqu'à ce que vous trouviez l'élément de menu que vous souhaitez masquer, faites défiler la page vers le bas. Vous trouverez une option pour ajouter une classe CSS dans les paramètres des éléments de menu. Cliquez dessus et ajoutez la classe CSS .hide-mobile.

Pour masquer un menu mobile, répétez ce processus.

Cependant, vous pouvez même cliquer avec la souris sur les éléments de menu que vous souhaitez rendre invisibles sur les ordinateurs de bureau. Ici, vous devrez ajouter des classes CSS .hide-desktop.

Enregistrez maintenant les modifications en cliquant sur le "bouton de menu d'enregistrement".

Pour masquer le menu mobile, vous devez ajouter le code CSS personnalisé. Pour ça

• Aller à l'apparence
• Cliquez sur la page de personnalisation
• Le personnalisateur de thème sera lancé
• Cliquez maintenant sur l'onglet CSS supplémentaire
• Et ajoutez le code donné ci-dessous dans la case CSS

@media (largeur minimale : 980px){
    .hide-desktop{
    affichage : aucun ! important ;
    }
}
    @media (largeur maximale : 980px){
    .hide-mobile{
    affichage : aucun ! important ;
    }
}

Vous pouvez maintenant vérifier sur votre site Web si le menu mobile que vous cachiez est visible ou non. Les menus mobiles seront probablement invisibles car nous suivons les étapes pour masquer un menu mobile.

Conclusion:
Nous espérons que les deux méthodes différentes mentionnées dans ce blog vous aideront à masquer un menu mobile facilement et efficacement.