Comment ajuster la taille du menu Divi sur tablette ?

Marlène

6 juillet 2021

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.

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 WordPress, Divi puis Theme Builder. 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.

Divi theme Builder

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 :

Menu Divi sur deux lignes

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 WordPress, Divi, options du thème puis personnaliser CSS.

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 : 

Menu Divi sur une ligne

Nos autres articles

Sep 06 2021

Interview d’Anne-Gaël : motion designer

Aujourd’hui, on rencontre Anne-Gaël, qui va nous expliquer son métier, son parcours et sa vision du motion design.
Jan 05 2021

Comment installer Google Analytics sur votre site Divi ?

Dans ce tutoriel, nous allons voir comment installer Google Analytics sur votre site construit avec le thème Divi, sans l’aide d’un plugin.
Nov 09 2020

Comment ajouter un élément de sous-menu Divi seulement sur mobile ?

Si vous refermez les sous-menus sur Divi, les liens de premiers niveaux ne seront plus accessibles. Comment faire pour résoudre ce problème ?