Sélectionner une page


La création d’un menu de navigation réactif qui a fière allure sur toutes les tailles d’écran peut être délicate. J’aurais aimé que ce ne soit pas si important, mais comme la navigation est généralement en haut de chaque page de votre site Web, c’est ce que l’on voit pour la première fois 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 assez cool. Pour le style de menu standard avec le logo à gauche et les raccourcis de menu à droite, les choses peuvent être facilement gâchées sur des écrans plus petits, surtout s’il y a trop de liens dans l’en-tête. Je sais que beaucoup de choses m’arrivent. Je vois le menu juste pour le bureau, puis je le vérifie sur une tablette (en particulier un iPad Pro) et le logo chevauche le menu et certains des liens ont sauté sur une ligne.

Aujourd’hui, je vais vous donner des solutions utiles à ces menus de navigation encombrés pour leur donner une belle apparence, même sur les tailles d’écran les moins courantes. Après tout, pour au moins certains utilisateurs, la crédibilité de votre site Web en dépend.

Commençons.

Correction de votre menu de navigation responsive dans Divi

Abonnez-vous à notre chaîne YouTube

Quatre solutions pour un menu de navigation encombré

L’un des avantages de Divi est qu’il est basé sur une disposition de grille fluide qui utilise des requêtes multimédias (CSS dans les départements) pour personnaliser le style de votre site pour différentes tailles d’écran. Le point auquel ces ajustements sont effectués est appelé le point d’arrêt. Si vous souhaitez perfectionner votre menu de navigation principal sur TOUTES les tailles d’écran, vous devrez probablement utiliser des requêtes multimédias pour personnaliser votre menu et ajuster certains points d’arrêt.

Le problème

Le problème le plus courant avec l’utilisation du menu de navigation standard de Divi est lorsqu’un client veut beaucoup d’éléments de menu de premier niveau. Lorsqu’il y a plus de 5 éléments de menu (ou éléments de menu avec une grande taille de police) dans le menu de navigation principal, un saut de ligne et un logo agrandi sont souvent créés lorsque la taille de l’écran atteint une largeur comprise entre 980 et 1100 pixels (la taille de petit ordinateurs portables et grandes tablettes). 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 ceci:

Le menu de navigation

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

Solution 1: définissez la barre de menus sur toute sa largeur

Normalement, je ne suggérerais pas de rendre votre menu de navigation pleine largeur à moins que je ne fasse également le reste de mon site Web pleine largeur. Je pense que la cohérence dans la conception est importante. Mais parfois, avoir un bon rendu de votre menu de navigation sur tous les appareils est un bon compromis. Et c’est aussi une solution simple.

Aller à Personnalisateur de thème> En-tête et navigation> Barre de menus principale et sélectionnez Faire toute la largeur.

Le menu de navigation

Solution 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 par défaut pour ajuster les options par défaut pour la hauteur maximale du logo, la taille du texte ou la police.

Le menu de navigation

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 pour trouver une solution simple.

Solution 3: affichez le menu mobile à un nouveau point d’arrêt.

Voici les domaines généraux 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 auquel le menu de navigation standard est converti en menu mobile (avec le système de navigation de Hambourg) est 980px. Le menu mobile s’affiche sur toute taille d’écran inférieure à 980 pixels.

Toutefois, si vous souhaitez éviter les sauts de ligne étranges dans le menu, modifiez le point d’arrêt sur une valeur différente. Par exemple, supposons que vous souhaitiez afficher le menu mobile à environ 1024 pixels au lieu de 980 pixels. Pour ce faire, vous devez mettre un CSS personnalisé dans une requête multimédia pour remplacer le style par défaut dans Divi.

Aller à Personnalisateur de thème > CSS supplémentaire et entrez ce qui suit:


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

#top-menu {
 display: none;
 }
 }


Le menu de navigation

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

Le menu de navigation

Solution 4: personnaliser le style de menu à un point d’arrêt spécifique

Cette solution est probablement la meilleure option car elle vous donne le plus grand 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 une conception personnalisée dans votre requête multimédia.

Voici le CSS standard de Divi pour vos éléments de menu:

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

Par exemple, disons que vous voulez que la taille de la police de votre menu soit par défaut de 18 pixels, mais changez-la en 14 pixels à un certain point d’arrêt. Et pour gagner encore plus d’espace, vous pouvez réduire le rembourrage à 15 au lieu de 22 pixels. Vous pouvez le faire en alignant la classe CSS avec tous les éléments de menu et en créant une requête multimédia

Aller à Personnalisateur de thème> CSS supplémentaire et entrez ce qui suit:


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


Le menu de navigation

Avec ce CSS, vous changez la taille de la police à 14 pixels et le bon remplissage à 15 pixels sur n’importe quel écran avec 1200 pixels ou moins. Cela crée une transition en douceur dans le redimensionnement 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.

Le menu de navigation

Personnaliser d’autres styles d’en-tête

Vous avez le choix entre cinq styles d’en-tête dans le personnalisateur de thème Divi (sans navigation verticale). Les cinq styles incluent le logo standard (celui discuté plus tôt dans cet article), coulissant, plein écran, centré et centré en ligne.

Styles de diapositive et plein écran

Si le style de diapositive ou plein écran est requis pour la conception de votre site Web, votre menu réactif sera assez facile car l’icône de hamburger est utilisée pour la navigation mobile pour déclencher le menu sur toutes les tailles d’écran.

Le menu de navigation

Le menu de navigation

Style centré

L’utilisation du style centré vous donne plus d’espace pour vos éléments de menu. Cependant, si vous avez encore besoin de plus d’espace, vous pouvez utiliser les mêmes solutions personnalisées que nous avons utilisées pour le style standard pour lui donner l’apparence que vous souhaitez.

Le menu de navigation

Style de logo en ligne centré

Enfin, la création de l’en-tête du logo en ligne centré depuis le début est un peu délicate. Si vous voulez que le logo soit centré sur la page, il y a certaines choses que vous devez faire correctement. Tout d’abord, vous devez avoir un nombre pair d’éléments de menu afin que le logo central reste la pièce maîtresse.

Le menu de navigation

Deuxièmement, la quantité de texte que vous utilisez pour chaque élément de menu détermine le centre du logo. Lorsque vous avez plus de texte sur un côté, le logo est un peu supprimé. Ce n’est pas un gros problème dans la plupart des situations. Cependant, si vous avez un en-tête avec des éléments centrés juste en dessous du logo, cela peut être un problème évident que vous devez résoudre.

Notez que le logo dans le menu est légèrement centré par rapport au logo centré dans la zone d’en-tête.

Le menu de navigation

Maintenant, je vais raccourcir le libellé de l’élément de menu « Éléments d’information » en « Information ». Maintenant, regardez comment le logo se déplace davantage vers le centre.

Le menu de navigation

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

Mais cela peut être un peu frustrant si vous êtes perfectionniste (je peux avoir mes moments comme celui-ci. Croyez-moi.) Il y a donc un niveau de personnalisation plus profond que vous pouvez faire si vous voulez faire encore plus de personnalisations. Au lieu d’ajuster le texte réel dans l’élément de menu pour qu’il corresponde au centre du logo, vous pouvez ajouter une classe CSS personnalisée à chaque élément et la remplir vers la droite ou la gauche. Cela devrait vous donner la dernière impulsion dont vous avez besoin pour que tout soit au centre de la scène.

Dans le tableau de bord WordPress, allez dans Apparence> Menus et assurez-vous que les classes CSS sont désactivées dans la section Options d’écran.

Le menu de navigation

Ouvrez ensuite l’élément de menu que vous souhaitez cibler. Entrez ensuite une classe CSS dans le champ de saisie Classes CSS. J’appelle mon « coup de coude ».

Le menu de navigation

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

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

Le menu de navigation

Avec ce CSS, seul l’élément avec la classe « Nudge » reçoit un remplissage correct de 32 pixels. Cela déplacera le logo juste assez pour le centrer.

Le menu de navigation

C’est ça!

Pensées proches

La création de sites Web est simple et amusante avec Divi. Mais parfois, les exigences du travail (et de nos clients) nous obligent à faire un effort supplémentaire pour nous assurer que nos emplacements sont superbes. Et ce qui distingue les bons sites Web des grands sites Web, ce sont les petits détails. La performance de votre menu de navigation réactif est l’un des détails importants que vous souhaitez obtenir correctement. La plupart du temps, c’est la première chose que vos utilisateurs voient et traitent sur chaque page de votre site Web. Un menu cassé peut faire une mauvaise première impression. J’espère que cet article vous aidera à avancer dans la bonne direction (désolé, je n’ai pas pu m’en empêcher :)).

Je suis sûr qu’il y a plus de problèmes et de solutions que je n’ai pas abordés dans cet article. N’hésitez pas à les poster dans les commentaires. Je suis heureux de vous entendre.

De bas en haut!





Source link

Recent Posts