Sélectionner une page

Dans cet article j’aide en vidéo, et avec un peu de CSS, un membre d’Easyweb Academy qui souhaite améliorer l’affiche version mobile de son site qui utilise un logo centré.

DIVI offre plusieurs options possibles pour le positionnement du logo comme vous pouvez le voir dans le menu « En-tête en Navigation > Format de l’en-tête > Style d’en-tête » du customizer :

 

sc1

 

Un membre d’Easyweb Academy a choisi l’option « Logo inline centré » afin d’avoir un logo centré au milieu de la barre de menu. Ce choix convient tout à fait au style du site mais ce membre n’est pas satisfait de l’aspect en version mobile. Elle juge que l’élément « Sélectionner une page » sur fond gris n’est pas gracieux.

sc2

 

Il n’existe pas d’option dans DIVI pour retirer cet élément mais il est tout à fait possible d’intégrer des règles CSS à DIVI afin de bénéficier de possibilités de personnalisation pratiquement sans limites. Pour rappel, CSS est un langage informatique qui permet de complètement définir l’aspect d’une page web à l’aide de règles simples.

 

Dans cette vidéo je vous explique comment :

  • 2:10 : Changer le style de menu dans le customizer DIVI
  • 3:35 : Trouver les éléments HTML qui doivent être modifiés à l’aide d’un navigateur
  • 5:30 : Tester les nouvelles règles directement dans le navigateur
  • 9:17 : Intégrer du CSS à DIVI

 

Le code CSS

@media (max-width: 980px){

.et_header_style_centered .mobile_nav .select_page, .et_header_style_split .mobile_nav .select_page {
visibility:hidden;
}

.et_header_style_split #main-header .mobile_nav {
 background-color: transparent;
}

}

 

Cette vidéo s’applique à DIVI 2.7.

 

Pin It on Pinterest