Comment faire correspondre votre barre de menus de bureau et mobile avec Divi

Dans la publication Divi d'aujourd'hui, nous allons partager une astuce rapide qui vous aidera à améliorer vos conceptions mobiles. Nous savons tous que votre conception sur mobile est tout aussi importante que sur ordinateur, mais en raison de certains paramètres standard de Divi, toutes les modifications que vous apportez dans le personnalisateur de thème ne se ressemblent pas sur le bureau et sur mobile.

Ce que nous allons faire dans cet article, en particulier, est de vous montrer comment créer une barre de menus mobile plus petite qui ressemble à la barre de menus sur le bureau lorsque vous utilisez la hauteur maximale du logo et la hauteur minimale du menu. Par défaut, les perspectives sur mobile et ordinateur de bureau diffèrent. Ce n'est pas parce que vous avez défini une certaine hauteur de menu et une hauteur maximale de logo que la même chose s'appliquera au mobile.

La différence pour les mobiles et les ordinateurs de bureau

Il existe de nombreux sites Web qui choisissent délibérément d'avoir une barre de menu principale avec peu de hauteur. Il a simplement l'air plus élégant et prend moins de place, ce qui est certainement intéressant à considérer si vous utilisez également la navigation fixe.

Lorsque vous choisissez la valeur la plus élevée pour la hauteur maximale du logo (qui est de 100) dans votre personnalisateur de thème et la valeur la plus faible pour la hauteur du menu (qui est de 30), vous obtenez le résultat suivant sur le bureau :

Cependant, les proportions du logo et la hauteur du menu sont différentes pour le mobile. Si vous avez sélectionné la valeur la plus élevée pour la hauteur maximale du logo et la valeur la plus faible pour la hauteur du menu, vous n'aurez pas le même résultat que sur le bureau. Le résultat que vous obtiendrez ressemblera plutôt à ceci :

Résultat

Maintenant, ce que nous allons faire, c'est vous montrer comment faire en sorte que la même mise en page s'applique à votre barre de menu mobile. Cela signifie que le logo aura sa hauteur maximale sur le menu. En plus de cela, la barre de menu elle-même sera beaucoup plus petite. Finalement, vous aurez plus de place à l'écran pour que le contenu de votre page apparaisse.

Après avoir suivi ce tutoriel pas à pas, vous obtiendrez le résultat suivant :

Ce qui ressemble évidemment plus à la version de bureau :

Comment faire correspondre votre barre de menus de bureau et mobile avec Divi

Abonnez-vous à notre chaîne Youtube

Paramètres de la barre de menus principale

La première chose que nous allons faire est d'apporter les modifications nécessaires à la barre de menu principale dans le personnalisateur de thème. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Barre de menu principale et assurez-vous que les paramètres suivants s'appliquent :

• Masquer l'image du logo : désactiver
• Hauteur du menu : 30
• Hauteur maximale du logo : 100

Barre de menu mobile Code CSS supplémentaire

La prochaine chose que nous devrons faire est d'ajouter du code CSS supplémentaire pour que la barre de menu mobile ait le même aspect que la barre de menu sur le bureau. Nous pouvons choisir d'ajouter le code CSS à une page en particulier (si nous voulons juste afficher le menu de cette manière sur certaines pages uniquement) ou à l'ensemble du site Web. En règle générale, vous appliquerez le code CSS à l'ensemble du site Web pour conserver la cohérence nécessaire sur votre site Web, mais c'est à vous de décider.

Ajouter du code CSS à une page en particulier

Pour ajouter le code CSS à une page en particulier, vous devrez ouvrir la page dans votre tableau de bord WordPress. Lors de l'utilisation du constructeur Divi, vous devrez cliquer sur l'icône suivante qu'il contient :

Ensuite, vous pouvez prendre les lignes de code CSS suivantes et les placer dans le champ CSS personnalisé :

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Ajouter un code CSS à l'ensemble du site Web

L'autre possibilité, et probablement celle qui sera le plus utilisée, consiste à ajouter le code à l'ensemble de votre site Web. Il y a deux façons de le faire.

Grâce au personnalisateur de thème

La première méthode consiste à ajouter le code CSS à votre personnalisateur de thème. Pour ce faire, accédez à votre tableau de bord WordPress > Apparence > Personnaliser > CSS supplémentaire > Placez les lignes de code CSS suivantes dans le champ CSS personnalisé :

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Cette option vous permet de voir les changements se produire en temps réel. C'est probablement le choix le plus intéressant si vous allez modifier certaines choses dans le code et que vous voulez voir à quoi cela ressemble avant d'enregistrer les modifications.

À travers les options de thème

La deuxième méthode consiste à ajouter le code CSS aux options du thème. Pour ce faire, accédez à votre tableau de bord WordPress > Divi > Options du thème > Faites défiler l'onglet Général et placez le code CSS suivant dans le champ CSS personnalisé :

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Modifiez le code selon vos propres préférences

Bien sûr, ce n'est pas la seule façon de faire ressembler la barre de menus mobile. Si vous appliquez des paramètres différents à votre barre de menus principale dans le personnalisateur de thème, il est très probable que vous deviez également apporter les modifications dans le code CSS. Cependant, les classes CSS et les identifiants CSS que vous utiliserez sont les mêmes.

L'une des choses que vous devrez certainement prendre en compte, cependant, est le rembourrage supérieur du conteneur de page. La valeur que nous avons attribuée dans notre code CSS correspond aux autres modifications que nous avons apportées. Cependant, si vous modifiez les valeurs dans les autres classes, vous devrez vous assurer que le rembourrage supérieur reste correct. Le moyen le plus simple de le faire est de commencer par une valeur plus élevée et de modifier la valeur jusqu'à ce que vous voyiez le conteneur de page se mettre en place.

Résultat

Si vous avez suivi ce tutoriel étape par étape, vous devriez avoir pu obtenir le résultat suivant pour votre barre de menu mobile :

Ce qui ressemble presque exactement au résultat que vous obtenez sur les ordinateurs de bureau :

Avant d'apporter des modifications CSS, le résultat sur Mobile ressemble à ceci :

Dernières pensées

Dans cet article, nous vous avons montré comment réduire la taille de la barre de menus de votre mobile et l'adapter à la barre de menus des ordinateurs de bureau. Vous pouvez simplement ajouter le code CSS nécessaire à une page en particulier ou à l'ensemble du site Web pour que cette méthode fonctionne. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !