Comment Créer un Effet de Survol d’un Menu sur Shopify

Nous allons voir dans cette vidéo comment créer un effet de survol sur des éléments d’un menu sur Shopify. 2 possibilités vous seront proposées avec un léger soulignement qui s’agrandir au survol ou un fond de couleur !

Vous pouvez voir le résultat ici: https://dgeodev.myshopify.com/

Installation du code

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Trouver le dossier Ressouces (Assets) ! Maintenant cherchez un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise. Une fois celui ci trouvé mettez vous tout en bas du fichier et copiez/collez le code suivant:

.site-nav a, 
.main-nav a {
  transition:all .2s ease-out;
}

.site-nav__label {
  border:none;
}
.site-nav a::after,
.main-nav a::after {
  display:block;
  content:"";
  width:0;
  height:1px;
  background:#444; 
  transition:all .4s ease-in-out;
}
.site-nav a:hover, .site-nav .site-nav--active a,
.main-nav a:hover {
  text-decoration:none;  
}

/* retirer et mettre les // pour choisir 1 des 2 effets */
/* hover effect */
.site-nav a:hover, .site-nav .site-nav--active a,
.main-nav a:hover, .site-nav .site-nav--active a {  
  //background:#ff6600;
  //color:#FFF;  
  //border-radius:5px;
}

/* underline effect */
.site-nav li:hover a::after, .site-nav .site-nav--active a::after,
.main-nav li:hover a::after {
  width:100%; 
}

Pour plus de détails voir la vidéo…

J’ai un autre thème que Debut !

Dans ce cas il faudra modifier la classe selon votre thème ! au fur et à mesure j’éditerai ce tuto pour rajouter les compatibilités avec les thèmes du marché.

Si le code ne fonctionne pas pour vous voici la procédure…

Faites moi un MP ici et envoyez moi directement l’url de votre site et je mettrai à jour le tuto en conséquence 😉

Thèmes pris en compte pour le moment

  • Debut,
  • Speedfly,
  • Turbo,
  • Fastlane

Ce tuto existe aussi en vidéo 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 5 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 5 commentaires

  1. Alexis

    19 Juin 2022 Répondre

    Hello,

    J’ai le thème payant Maker et j’ai l’impression que ça ne fonctionne pas.

    Merci 🙂

    1. Dgeo Dev

      20 Juin 2022 Répondre

      Hello, navré je ne connais pas ce thème. L’idéal serait de voir avec leur support afin qu’il puisse vous donner des pistes sur les classes utilisées et à remplacer dans le tutoriel.

  2. nicolas

    3 Jan 2023 Répondre

    Bonjour,

    Sur thème DAWN la première partie fonctionne, mais pas le reste? merci pour tout!!

  3. Rad

    16 Sep 2024 Répondre

    Pour le thème Sense ça ne fonctionne pas malheureusement ;
    Merci à vous pour ces tuto sympa et simple.

Laisser un commentaire

Fermer le menu
×
×

Panier