Ce style de menu avec le thème DIVI transforme les éléments de menu en bouton avec des couleurs de survol. Il donne également une autre couleur distincte au lien de menu actif.
Pourquoi utiliser un menu style bouton avec DIVI ?
Ceci est bien sûr inspiré des boutons. J’aime beaucoup l’apparence de la navigation par bouton. Je pense aussi que le style un est un look assez polyvalent qui pourrait fonctionner sur presque n’importe quel site. Changer les couleurs d’arrière-plan est assez facile à réaliser.
Cette facilité de personnalisation permet d’adapter les couleurs à votre charte graphique.
Comment coder ce type de menu ?
Comme pour les deux autres styles vus précédement, vous devez ajouter le code CSS personnalisé ci-dessous à la feuille de style de votre thème enfant ou à la case CSS personnalisée dans l’onglet des paramètres généraux du thème de Divi. Vous pouvez apporter vos propres ajustements et modifications au code (comme les couleurs) en ajustant les valeurs à côté des parties commentées du code.
Les personnalisations possibles sont nombreuses :
- Changer la couleur de la page actuelle
- Changer la couleur des pages du menu
- changer la couleur des pages au survol de la souris
- Changer les coins des rectangles pour les arondirs plus ou moins
.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#top-menu li {
padding-right: 5px;
}
#et-top-navigation {
padding: 20px 0 !important;
}
#top-menu li a {
background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/
padding: 15px 20px;
border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}
#top-menu li a:hover {
background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
}Pour avoir votre menu personnalisé, vous pouvez me contacter