Aujourd’hui, nous allons voir comment ajuster la taille du menu Divi.
Lorsque vous construisez un menu avec le theme Builder de Divi, celui-ci peut passer rapidement sur deux lignes si le nombre de caractères est important ou si vous avez beaucoup d’items.
Comment réduire la taille des caractères seulement sur les largeurs d’écran plus petites afin que le menu entier reste visible en un coup d’œil ?
Construction du menu avec le theme Builder
Rendez-vous dans le dashboard de WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More, Divi puis Theme BuilderLe Builder Divi est l'interface graphique du thème Divi qui permet de concevoir et de personnaliser les pages d'un site... More. Ici, vous pouvez créer avec le constructeur, le menu et le footer de votre site. Des mises en page peuvent également être appliquées sur des pages spécifiques en cas de besoin. Par exemple, si vous avez une partie blog différente de la partie corporate de votre site, un layout particulier pourra être appliqué à chacune de ces parties.
Test avec différents formats tablettes
Une fois que votre menu est construit, rendez-vous dans l’inspecteur de votre navigateur (sur Chrome, clic droit puis inspecter). Testez par exemple le format iPad Pro qui est de 1024 x 1366 pixels. Si votre menu est sur deux lignes, il est alors possible de l’ajuster juste sur ces largeurs plus réduites.
Testez alors avec l’option « Responsive » pour manipuler manuellemet la largeur de l’aperçu. Vous verrez alors à quelle format d’écran votre menu passe sur deux lignes.
Vous pouvez aussi consulter https://fr.screenresolution.org/ pour connaitre les résolutions d’écran les plus courantes.
Voici un exemple du site Car’ rev services sans ajustement :
Ajuster la taille du menu avec du code CSS
Pour réduire la police du menu sur un format particulier, rendez-vous dans le dashboard WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More, Divi, options du thèmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... More puis personnaliser CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... More.
Entrez alors le code suivant en adaptant les valeurs de largeur d’écran.
@media screen and (min-width: 980px) and (max-width: 1059px) {
.et_pb_menu_0_tb_header.et_pb_menu ul li a {
font-size: 18px!important;
}
}Une fois le code enregistré, le menu est maintenant sur une seule et même ligne :
Besoin d’aide sur votre site Divi ?
Si vous avez besoin de finaliser votre site et que vous avez encore des questions, n’hésitez-pas à faire appel à notre accompagnement personnalisé et spécialisé sur Divi.
