Réparer votre menu de navigation responsive dans Divi

Créer un menu de navigation réactif qui a fière allure sur toutes les tailles d'écran peut être difficile. J'aurais aimé que ce ne soit pas si important, mais comme la navigation est normalement en haut de chaque page de votre site, c'est la chose qui est visible en premier sur chaque page. Il est donc important de bien faire les choses. Heureusement, le personnalisateur de thème de Divi vous permet de personnaliser le menu principal avec des options d'en-tête plutôt sympas. Mais pour le style de menu par défaut avec le logo à gauche et les liens de menu à droite, les choses peuvent facilement être mélangées sur des tailles d'écran plus petites, en particulier lorsque vous avez trop de liens encombrant l'en-tête. Je sais que ça m'arrive souvent. Je reçois le menu qui convient parfaitement au bureau, puis vous le vérifiez sur une tablette (en particulier un iPad Pro) et le logo chevauche le menu et certains des liens ont sauté d'une ligne.

Aujourd'hui, je vais vous donner quelques solutions utiles pour ces menus de navigation encombrés afin qu'ils aient fière allure même sur ces tailles d'écran pas si courantes. Après tout, du moins pour certains utilisateurs, la crédibilité de votre site en dépend.

Commençons.

Réparer votre menu de navigation responsive dans Divi

Abonnez-vous à notre chaîne Youtube

Quatre solutions pour un menu de navigation encombré

L'un des grands avantages de Divi est qu'il est construit sur une disposition en grille fluide qui utilise des requêtes multimédias (CSS compartimenté) pour ajuster le style de votre site pour différentes tailles d'écran. Le point auquel ces ajustements sont effectués est ce que nous appelons des points d'arrêt. Si vous vous engagez à perfectionner votre menu de navigation principal sur TOUTES les tailles d'écran, vous devrez probablement personnaliser votre menu à l'aide de requêtes multimédias et ajuster certains points d'arrêt.

Le problème

Le problème le plus courant que je rencontre lors de l'utilisation du menu de navigation par défaut de Divi est lorsqu'un client veut beaucoup d'éléments de menu de haut niveau. Avoir plus de 5 éléments de menu (ou avoir des éléments de menu avec une grande taille de police) dans le menu de navigation principal créera souvent un saut de ligne et un logo agrandi lorsque la taille de l'écran atteint une largeur comprise entre 980-1100 pixels (la taille des petits ordinateurs portables et gros comprimés). Je suis convaincu que vous avez déjà eu ce problème, même si vous ne l'avez jamais remarqué. Cela ressemble à quelque chose comme ça :

Pas idéal. Voyons donc quatre solutions à ce problème.

Solution n°1 : rendre la barre de menus pleine largeur

Normalement, je ne suggérerais pas de faire votre menu de navigation en pleine largeur à moins que je ne fasse également le reste de mon site en pleine largeur. Je pense que la cohérence dans la conception est importante. Mais parfois, c'est un bon compromis à faire si cela signifie que votre menu de navigation a fière allure sur tous les appareils. Et c'est aussi une solution simple.

Accédez à Personnalisateur de thème > En-tête et navigation > Barre de menus principale et sélectionnez Rendre pleine largeur .

Solution n° 2 : ajustez les paramètres du logo et de la police.

Une autre solution simple à votre problème consiste à utiliser les paramètres de personnalisation du thème pour ajuster les options par défaut de la hauteur maximale du logo, de la taille du texte ou de la police.

Soyez prudent lorsque vous ajustez ces options car vous ne voulez jamais compromettre la conception et la lisibilité de votre logo ou des éléments de menu dans le but de faire une solution facile.

Solution n°3 : afficher le menu mobile à un nouveau point d'arrêt.

Voici les plages générales pour chacun des points d'arrêt au sein de Divi :

Grand bureau : 1405px et plus
Bureau standard : entre 1100px et 1405px
Ordinateurs portables et grandes tablettes : entre 980px et 1100px
Tablettes : entre 768px et 980px
Smartphones et petites Tablettes : entre 320px et 768px ;
Smartphones : entre 320px et 480px ;

Le point d'arrêt dans lequel le menu de navigation par défaut se transforme en menu mobile (avec la navigation hamburger) est de 980px. Toute taille d'écran inférieure à 980px affichera le menu mobile.

Mais, si vous souhaitez éviter les sauts de ligne de menu étranges, vous modifiez le point d'arrêt en une valeur différente. Supposons que vous souhaitiez afficher le menu mobile à environ 1024px au lieu de 980px. Pour ce faire, vous devrez insérer du CSS personnalisé dans une requête multimédia pour remplacer le style par défaut dans Divi.

Accédez à Personnalisateur de thème > CSS supplémentaire et saisissez les éléments suivants :

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Cette requête média fait deux choses. Il masque le menu normal et affiche le menu mobile au point d'arrêt 1024px.

Solution n° 4 : Ajuster le style de menu à un certain point d'arrêt

Cette solution est probablement la meilleure option car elle vous permet d'avoir le plus de contrôle sur votre menu à certains points d'arrêt. Vous pouvez cibler vos éléments de menu en utilisant leur classe CSS pour créer un style personnalisé dans votre requête multimédia.

Voici le CSS par défaut de Divi pour vos éléments de menu :

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Supposons que vous souhaitiez que la taille de la police de votre menu soit de 18 pixels par défaut, mais que vous souhaitiez qu'elle passe à 14 pixels à un certain point d'arrêt. Et pour gagner encore plus de place, vous pouvez réduire le rembourrage à 15px au lieu de 22px. Vous pouvez le faire en ciblant la classe CSS pour tous les éléments de menu et en créant une requête multimédia

Accédez à Personnalisateur de thème > CSS supplémentaire et saisissez les éléments suivants :

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

Ce que fait ce CSS est de changer la taille de la police à 14px et le bon rembourrage à 15px sur n'importe quel écran 1200px ou moins. Cela crée une transition en douceur lors du réglage de la taille de l'écran sur le bureau et vous permet de conserver votre navigation par défaut sur les grandes tablettes et les petits ordinateurs portables.

Ajustement d'autres styles d'en-tête

Vous avez le choix entre cinq styles d'en-tête dans le personnalisateur de thème de Divi (sans compter la navigation verticale). Les cinq styles incluent Par défaut (celui déjà abordé dans cet article) Slide-in, Fullscreen, Centered et Centered Inline Logo.

Styles d'insertion et plein écran

Si la conception de votre site Web nécessite des styles de diapositives ou de plein écran, votre menu réactif est à peu près infaillible, car l'icône de hamburger de navigation mobile est utilisée pour déclencher le menu sur toutes les tailles d'écran.

Style centré

Si vous utilisez le style centré, vous avez plus d'espace pour vos éléments de menu à respirer, mais si vous avez encore besoin d'un peu plus d'espace, vous pouvez utiliser les mêmes solutions personnalisées que nous avons utilisées pour le style par défaut pour lui donner l'apparence que vous souhaitez.

Style de logo en ligne centré

Enfin, l'en-tête de style de logo en ligne centré est un peu difficile à obtenir dès le début. Vous devez faire certaines choses correctement si vous voulez que le logo soit centré sur la page. Vous devez d'abord avoir un nombre pair d'éléments de menu afin que le logo du milieu reste la pièce maîtresse.

Deuxièmement, la quantité de texte que vous utilisez pour chaque élément de menu déterminera le point central du logo. Si vous avez plus de texte sur un côté, le logo sera légèrement décalé. Ce n'est pas grave dans la plupart des situations, mais si vous avez un en-tête avec des éléments centrés directement sous le logo, cela peut être un problème évident que vous devrez rectifier.

Remarquez comment le logo est légèrement décentré dans le menu par rapport au logo centré dans la section d'en-tête.

Maintenant, je vais raccourcir l'étiquette de l'élément de menu « Éléments d'information » en « Informations ». Regardez maintenant comment le logo se déplace davantage vers le centre.

Cette solution peut être tout ce dont vous avez besoin pour obtenir le logo où vous le souhaitez. Vous pourrez peut-être vous en sortir en modifiant quelque chose comme « À propos de nous » en « À propos » ou vice versa pour effectuer ces petits ajustements.

Mais, cela peut devenir un peu frustrant si vous êtes un perfectionniste (je peux en avoir mes moments. Croyez-moi.) Donc, il y a un niveau de personnalisation plus profond que vous pouvez faire si vous voulez faire encore plus d'ajustements. Au lieu d'ajuster le texte réel dans l'élément de menu pour ajuster le point central du logo, vous pouvez ajouter une classe CSS personnalisée à n'importe quel élément et lui donner un peu de remplissage à droite ou à gauche. Cela devrait vous donner le dernier coup de pouce dont vous avez besoin pour centrer les choses.

À partir du tableau de bord wordpress, accédez à Apparence> Menus et assurez-vous que les classes CSS sont cochées dans la zone Options d'écran.

Ensuite, ouvrez l'élément de menu que vous souhaitez cibler. Saisissez ensuite une classe CSS dans la zone de saisie Classes CSS. J'appelle le mien "nudge".

Après cela, allez dans Divi > Personnalisateur de thème > CSS supplémentaire et ajoutez le CSS personnalisé suivant :

#top-menu li.nudge  {
padding-right: 32px;
}

Avec ce css, seul l'élément avec la classe « nudge » reçoit un rembourrage droit de 32px ; Cela pousse le logo juste assez pour le centrer.

C'est ça!

Pensées de clôture

Divi rend la création de sites Web amusante et facile. Mais parfois, les exigences du travail (et de nos clients) nous obligent à faire un effort supplémentaire pour nous assurer que nos sites sont stellaires. Et ce qui sépare les bons sites des grands sites, ce sont les petits détails. La façon dont votre menu de navigation réactif fonctionne est l'un de ces détails importants que vous souhaitez obtenir correctement. La plupart du temps, c'est la première chose que vos utilisateurs verront et avec laquelle ils interviendront sur chaque page de votre site. Un menu à l'apparence cassée peut laisser une mauvaise première impression. J'espère que ce post vous aidera à vous « pousser » dans la bonne direction (désolé, je n'ai pas pu m'en empêcher :)).

Je suis sûr qu'il existe d'autres problèmes et solutions que je n'ai pas abordés dans cet article. N'hésitez pas à les poster dans les commentaires. Je suis dans l'attente de votre réponse.

À votre santé!