CONTACT

    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"; }
    }

    6 commentaires sur cet article

    1. 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 ?

      1. Faut peut-être voir du côté des animations CSS pour ce genre de choses. Je n'ai pas plus de piste que ça.

    2. Juste une question, chez moi la croix en menu ouvert ne s'affiche pas, elle reste en hamburger !?

      1. 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.

    Laisser un commentaire

    Votre adresse IP ne sera pas collectée.
    Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain ;-)