Création d'un menu déroulant compact

Bonjour,

J’utilise le thème Horizon sur Shopify et j’ai un problème avec le menu déroulant de ma navigation.

Par défaut, le mega menu prend toute la largeur de l’écran. Moi je voudrais simplement un petit rectangle compact qui s’affiche juste sous le mot “Catalogue” avec mes sous-catégories (Hauts, Jupes, Vestes) dedans, centré, comme un dropdown classique.

Mon header est transparent et le mega menu apparaît aussi transparent ce qui fait qu’on voit un grand espace vide quand on survole Catalogue.

Est-ce que quelqu’un sait comment remplacer le mega menu pleine largeur par un petit dropdown compact sur le thème Horizon? Est-ce que c’est possible via le CSS ou le Liquid ?

Merci beaucoup !

Bonjour,

Oui, c’est tout à fait possible, mais cela dépend de la manière dont le thème Horizon a implémenté la navigation.

D’après votre description, le lien “Catalogue” est actuellement configuré pour utiliser un mega menu, ce qui explique pourquoi le sous-menu s’étend sur toute la largeur de l’écran. Avec un header transparent, cela peut effectivement donner l’impression d’un grand espace vide lors du survol.

Voici les options possibles :

1. Vérifier les paramètres du thème

Certains thèmes permettent de choisir entre :

  • Mega menu
  • Dropdown classique
  • Menu déroulant compact

Je vous recommande de vérifier dans :

Boutique en ligne → Thèmes → Personnaliser → En-tête (Header)

afin de voir si Horizon propose ce réglage nativement.

2. Solution CSS (si le thème le permet)

Si le menu est déjà structuré comme un dropdown mais simplement affiché en pleine largeur via CSS, il est parfois possible de :

  • limiter sa largeur ;
  • le positionner juste sous “Catalogue” ;
  • lui appliquer un fond opaque ;
  • centrer son contenu.

Cependant, si Horizon utilise un véritable composant “mega menu”, le CSS seul ne suffira pas toujours.

3. Modification Liquid

Dans certains cas, il faut modifier les fichiers Liquid du header pour remplacer le composant mega menu par un sous-menu classique.

Cela implique généralement d’intervenir dans les fichiers liés à la navigation du thème et d’adapter la logique qui affiche les menus enfants.

Concernant la transparence

Même sans remplacer complètement le mega menu, vous pouvez souvent améliorer l’affichage en ajoutant un fond au conteneur du menu afin qu’il ne soit plus transparent lors du survol.

Pour pouvoir vous guider précisément, pourriez-vous partager :

  • l’URL de votre boutique ;
  • une capture d’écran du menu ouvert ;
  • et, si possible, le nom exact de la version du thème Horizon que vous utilisez ?

Je pourrai alors indiquer si une simple modification CSS suffit ou si une adaptation du code Liquid est nécessaire.

N’hésitez pas également à revenir vers moi si vous souhaitez une assistance technique plus approfondie. Je serai ravi de vous aider sur ce sujet ou sur toute autre personnalisation Shopify à l’avenir.

Hi @lcrptt12mo

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop: