18/09/2017
Ajustements du menu Divi
Hello tout le monde !
Aujourd'hui, un peu de style dans le menu Divi, qui de base a vraiment un look Fischer-Price à mon humble avis.
Version desktop
Explications
- Fonte plus fine (100 à 300 selon la police...!)
- Suppression du padding des sous-menus et éléments de sous-menus
- Largeur et padding des liens des sous-menus pour l'harmonie 😉
- Ajout d'une discrète ligne de séparation entre les liens (jouer sur l'opacité en fonction de la couleur de fond)
- Taille de police à définir aussi, un chouïa plus petite que le menu principal, et légère séparation (facultative) entre les liens
- Ajustement de la position verticale des sous-menus pour les aligner au nouveau design
Idem pour l'indicateur de sous-menu (la petite flèche vers le bas)
Code CSS desktop
@media only screen and (min-width: 981px) {
#top-menu li a { font-weight: 300; }
#top-menu li ul, #top-menu li li { padding: 0; }
#top-menu li ul, #top-menu li li a { width: 280px; }
#top-menu li li a {
padding: 10px 20px;
font-size: 0.8em;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
#top-menu li ul li ul { top: -3px; }
#top-menu li .menu-item-has-children > a:first-child::after { top: 10px; }
}
Version mobile
Explications
- Fonte plus fine
- Ajustement du menu aux bords de l'écran : il faut magouiller car le menu est inclus dans un conteneur plus petit que l'écran !
- Utilisation de la croix pour l'icône du menu quand il est ouvert (le ::before contient le code du caractère dans la fonte interne ETmodules)
Merci à Cory Jenkins de Divi Space pour ce hack du menu mobile.
Code CSS mobile
@media only screen and (max-width: 980px) {
#mobile_menu a { font-weight: 300; }
.container.et_menu_container { width: calc( 100% - 60px); }
.et_mobile_menu {
margin-left: -30px;
padding: 5%;
width: calc( 100% + 60px);
}
.mobile_nav.opened .mobile_menu_bar_toggle::before { content: "\4d"; }
}
Merci pour ce code qui me rend bien service.
Je t'en prie, content que ça puisse servir !
Vers qui est-ce que je pourrais me tourner pour savoir comment changer de couleur toutes les 5 secondes un ligne de soulignement . T'est-il possible de m'indiquer une source stpl ?
Faut peut-être voir du côté des animations CSS pour ce genre de choses. Je n'ai pas plus de piste que ça.
Juste une question, chez moi la croix en menu ouvert ne s'affiche pas, elle reste en hamburger !?
Vérifie que le code n'a pas été désescapé (perte du "\" du code du symbole pour une raison obscure de copier-coller raté ou autre...). Ça m'est arrivé parfois.