menu_ajustement_tablette

Comment ajuster la taille du menu Divi sur tablette ?

Marlène

6 juillet 2021

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 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
dégradé noir gris