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’aggrandir 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 Assets ! Maintenant cherchez un fichier .css ou .scss ou css.liquid ou scss.liquid, générlament c’est theme, style ou app. 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 4 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine