Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Souhaitez-vous personnaliser votre menu déroulant? Deux un peu différent des options de style disponibles? Dans ce tutoriel, je vais vous montrer comment faire cela en utilisant CSS.

À la fin de cet article, je vais également vous montrer comment augmenter la largeur du menu déroulant.

Vous pouvez voir une démo en direct ici.

Si vous voulez faire passer votre en-tête Divi au niveau suivant, essayez d’en créer un En-tête Divi personnalisé en suivant mon tutoriel d’en-tête personnalisé.

Styles CSS pour votre menu déroulant

Vous devez d’abord créer un menu déroulant. Ensuite, vous pouvez ajouter ce CSS pour le style. Placez le code CSS sous Options de conception> CSS personnalisé ou dans votre Thème des enfants si vous en utilisez un.

/* ##### DROPDOWN MENU STYLES ##### */

#top-menu .sub-menu {
   background-color: #3c5464; /* Background color dropdown */
   border-top: 3px solid #25313a; /* Top border color dropdown */
}

#top-menu .sub-menu li a {
   font-size: 14px; /* Font size dropdown */
   width: 100%;
   color: #fff;
   border-bottom: 1px solid #768792; /* Border bottom menu item color */
}

.sub-menu li:hover {
   background-color: #25313a; /* Hover color menu item */
}

.sub-menu .current_page_item {
   background-color: #25313a; /* Current menu item color dropdown */
}

#top-menu .sub-menu li {
   padding-left: 0px;
   padding-right: 0px;
   width: 100%;
}

#top-menu li li a {
   padding-top: 10px;
   padding-bottom: 8px;
}

#top-menu .sub-menu {
   padding-top: 0px;
   padding-bottom: 0px;
}

.nav ul li a:hover {
   opacity: 1;
   background-color: rgba(0,0,0,0);
}

Noter: J’ai ajouté quelques notes entre / * * / pour que vous sachiez où changer les couleurs et la taille de la police.

Augmenter la largeur du menu déroulant

Parfois, le texte de votre menu déroulant est interrompu sur une autre ligne. Pour éviter cela, vous pouvez augmenter la largeur du menu déroulant. Ajoutez le code CSS suivant sous Options du thème> CSS personnalisé

/* ##### DROPDOWN MENU WIDTH ##### */

.nav li ul {
   width: 280px !important; /* Width of the dropdown menu */
}

.nav li li ul {
   left: 280px !important; /* Use the same size as above */
}

#top-menu li li a {
   width: 240px; /* Make this 40 less then the width of the dropdown menu */
}

Noter: Si vous voulez changer la largeur en autre chose, suivez les instructions entre / * * /

J’espère que ce tutoriel vous a été utile. Par défaut, il n’y a pas beaucoup d’options de style de menu déroulant, mais avec ces petites modifications, vous pouvez toujours styliser votre menu déroulant.

Le même problème affecte le menu mobile. Vous pouvez suivre mon tutoriel comment concevoir le menu Divi Mobile pour d’autres ajustements.



Source link

Recent Posts