Pourquoi votre menu mobile Shopify ne s'ouvre pas (et comment le réparer)

Vous ouvrez votre boutique Shopify sur votre smartphone, vous touchez l’icône hamburger à trois barres pour parcourir une collection, et rien ne se passe. Ou peut-être que le volet s’ouvre brièvement avant de se refermer d’un coup, ou que vos catégories principales apparaissent mais refusent de déplier leurs sous-catégories. Si les visiteurs ne peuvent pas ouvrir votre menu de navigation sur mobile, parcourir votre boutique devient beaucoup plus difficile.

Quick answer: why a Shopify mobile menu won’t open

Most Shopify mobile menus fail for one of three reasons: the drawer is hidden by CSS or broken theme markup, a hover-only dropdown fights with touch, or submenu links are not nested in Content > Menus. Duplicate your theme, check each cause in that order, and test on a real phone.

Ce guide est conçu spécifiquement pour les thèmes Shopify ; les menus sous WordPress ou Wix fonctionnent différemment. Examinez dans l’ordre chacune des causes potentielles détaillées ci-dessous sur une copie de sauvegarde de votre thème, afin de préserver votre boutique en production pendant vos tests.

Three different problems: menu won’t open, opens the wrong way, submenu won’t expand

Lorsque les marchands indiquent que leur menu mobile ne fonctionne pas, ils décrivent l’un de ces cinq symptômes courants. Avant de modifier vos réglages ou de modifier le code, repérez la ligne correspondant à votre situation :

Chaque symptôme correspond à un niveau technique distinct de votre vitrine. Si l’icône hamburger ne répond pas, cela peut venir d’un script interrompu ou d’un tiroir coulissant masqué par une propriété CSS. À l’inverse, un sous-menu qui clignote peut provenir de règles de survol conçues pour la souris et qui réagissent mal au toucher. Gardez à l’esprit que les entêtes pour mobile et ordinateur peuvent être configurés séparément dans certains thèmes.

Before you edit code: duplicate your theme and test on a real phone

Avant de modifier les fichiers de modèles ou les feuilles de style de votre thème, protégez votre vitrine active en respectant deux précautions fondamentales.

Tout d’abord, créez une copie de sauvegarde de votre thème actif. Comme le rappelle le guide de duplication des thèmes de Shopify : “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.” Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes, cliquez sur les trois points (...) à côté de votre thème actuel et sélectionnez Dupliquer. Réalisez l’ensemble de vos diagnostics et tests de code exclusivement sur cette copie.

Ensuite, testez la navigation sur un smartphone physique. L’affichage adaptatif des outils de développement sur ordinateur est pratique pour vérifier les largeurs, mais il ne remplace pas un vrai smartphone. Shopify recommande explicitement de tester les menus sur des appareils mobiles pour confirmer que les menus déroulants se déploient comme prévu. Un véritable appareil peut révéler des problèmes tactiles que les émulateurs de bureau risquent de laisser passer.

Pensez également à noter les applications ou balises récemment installées. Les outils marketing, Google Tag Manager ou constructeurs de pages peuvent ajouter des scripts susceptibles de perturber la navigation. Vérifiez d’abord l’éditeur de thème, car le comportement du menu mobile est contrôlé dans l’éditeur de thème sous la section Entête sur de nombreux thèmes.

Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid

Si toucher l’icône hamburger ne produit aucun effet, votre boutique subit généralement soit une erreur JavaScript empêchant le déclenchement de l’événement d’ouverture, soit une règle CSS maintenant le tiroir invisible.

Check the browser console and recent apps

Commencez par vérifier l’exécution des scripts JavaScript. Reliez votre smartphone à un ordinateur via le débogage USB, ou ouvrez votre boutique sur un navigateur de bureau réduit à la largeur mobile et lancez les outils de développement (F12 ou clic droit puis Inspecter).

Sélectionnez l’onglet Console et touchez l’icône hamburger. Recherchez des messages d’erreur en rouge comme Uncaught TypeError ou SyntaxError. Une erreur de script non gérée peut interrompre la suite de ce script, ce qui peut empêcher le script du menu de s’exécuter. Si l’erreur désigne une application tierce récemment installée, désactivez temporairement son intégration dans Boutique en ligne > Thèmes > Personnaliser > Intégrations d’applications pour voir si le bouton se remet à fonctionner.

Restore the top lines of theme.liquid

Si la console indique un blocage généralisé des scripts, examinez le fichier de modèle racine de votre thème. Le fichier layout/theme.liquid contient l’ossature HTML de la page sur laquelle s’appuient les scripts du thème.

Dans un cas rapporté sur la communauté Shopify, le menu mobile d’une boutique a cessé de fonctionner après que les deux premières lignes de theme.liquid ont été supprimées lors de l’ajout d’une balise Google Tag Manager. Il s’agit d’une cause probable signalée par un propriétaire de boutique, et non d’un correctif confirmé officiellement, mais cela montre pourquoi il vaut la peine de vérifier si des lignes manquent en haut du fichier. Ouvrez Boutique en ligne > Thèmes > … > Modifier le code, ouvrez layout/theme.liquid et comparez les premières lignes avec une copie intacte du même thème pour repérer ce qui a été supprimé.

A CSS rule that forces the drawer visible (last resort)

Dans certaines situations, le JavaScript du thème active correctement l’état d’ouverture, mais des règles CSS maintiennent le panneau hors de l’écran ou masqué.

Par exemple, dans un fil de discussion de la communauté Shopify dédié au thème Dawn, un utilisateur a confirmé que son tiroir s’affichait de nouveau après avoir ajouté une requête média dans base.css :

/* Example reported in a Shopify Community thread for Dawn theme base.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
  .menu-opening .menu-drawer {
    transform: translate(0);
    visibility: visible;
  }
}

Dans un autre cas rencontré sur un thème différent, un commerçant a validé le fonctionnement du menu après avoir ajouté visibility: visible à sa règle de divulgation dans main.css (discussion de la communauté Shopify 389597) :

/* Example reported in a Shopify Community thread for main.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
.main-menu__disclosure.is-open > .main-menu__content {
  opacity: 1;
  visibility: visible;
}

De même, un autre marchand a trouvé utile un sélecteur ciblant les balises details ouvertes comme .js details[open] > .menu-drawer (discussion de la communauté Shopify 395768).

Considérez ces extraits CSS strictement comme des exemples observés sur des versions spécifiques de thèmes, et non comme une solution universelle. Les sélecteurs varient fortement d’un thème à l’autre. De plus, forcer la visibilité par CSS ne fait que dissimuler le problème si la cause profonde est un balisage cassé. Gardez trois repères de diagnostic à l’esprit : visibility hidden, broken theme.liquid, et check the browser console.

Figure 1: Concept illustration — Diagram of a Shopify mobile drawer hidden by CSS next to the same drawer made visible after checking markup and styles.

Hover dropdowns on touch screens: open on tap instead

Si votre menu mobile s’ouvre brièvement puis se referme immédiatement, ou si les sous-menus clignotent au toucher, une cause fréquente est une règle de survol conçue pour ordinateur.

D’après la documentation MDN Web Docs, la règle @media (hover: none) caractérise les appareils où “the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap)” (documentation MDN sur hover). À l’opposé, @media (hover: hover) s’applique quand “the primary input mechanism can conveniently hover over elements.”

Lorsque des styles CSS personnalisés ou ceux du thème pour ordinateur associent le déploiement du sous-menu à l’état :hover sans vérifier les capacités de l’appareil, l’écran tactile peut tenter d’émuler le survol. Résultat : un menu déroulant peut s’ouvrir et se refermer aussitôt au toucher, ou le toucher ne se comporte pas comme la règle de survol l’attend.

Pour éviter ce blocage, passez à l’ouverture au toucher en limitant les règles de survol aux seuls périphériques équipés d’un véritable curseur :

/* Restrict hover behavior to devices with true pointer hover capability */
/* Placeholder selectors for illustration only: replace them with your theme's own classes. */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (hover: hover) {
  .header__menu-item:hover .header__submenu {
    display: block;
  }
}

En encadrant les styles de survol dans @media (hover: hover), les smartphones et tablettes reviennent au comportement d’ouverture au toucher du thème. Ouvrir un sous-menu au survol est délicat sur les entêtes tactiles : dans une discussion de la communauté Shopify sur Dawn, un intervenant écrit qu’il ne voit pas comment y parvenir uniquement en CSS ; il faudra probablement du JavaScript, ou conserver le comportement par défaut du thème.

Submenus that should expand: nesting, theme settings, and CSS

Quand les liens principaux apparaissent dans le tiroir mobile mais que les éléments secondaires refusent de s’afficher, le problème relève le plus souvent de l’organisation des menus.

Vérifiez d’abord la hiérarchie dans votre panneau d’administration Shopify sous Contenu > Menus. Comme l’indique le manuel des menus déroulants de Shopify : “You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” Chaque élément enfant doit être imbriqué sous son élément parent dans l’éditeur de menu ; un élément qui n’est pas imbriqué reste un élément de premier niveau.

Shopify impose également une limite hiérarchique claire : “The top-level item can have up to two levels of nested drop-down menus.” Cela permet trois niveaux au total :

1. Élément de premier niveau (ex. Vêtements)
2. Premier sous-niveau imbriqué (ex. Femmes)
3. Deuxième sous-niveau imbriqué (ex. Vestes)

Sur mobile, de nombreux thèmes affichent les éléments parents contenant des sous-catégories sous la forme de boutons de déploiement plutôt que de liens de redirection directs. Toucher l’élément parent ouvre la liste sans changer de page. Si vous souhaitez que les acheteurs puissent accéder à la collection parente, ajoutez un lien enfant dédié (tel que “Tout afficher”) en tête de liste.

Si l’imbrication est correcte dans l’administration mais que le sous-menu refuse toujours de s’ouvrir sur mobile, votre thème nécessite peut-être un ajustement stylistique. Shopify précise que “some themes might require CSS adjustments to improve mobile usability.” Si vous ajoutez des règles CSS, restreignez-les scrupuleusement aux requêtes média mobiles (comme @media (max-width: 749px)) et ciblez uniquement les classes du tiroir pour ne pas altérer la navigation sur ordinateur. Pour approfondir ces structures, consultez notre Shopify menu guide complet.

Drawer opens full width or the wrong style

Il arrive que le menu mobile s’ouvre, mais d’une manière qui nuit à l’ergonomie. Certains marchands constatent que le tiroir de navigation recouvre tout l’écran du téléphone et masque la boutique derrière lui.

Dans des discussions entre commerçants, certains disent préférer un tiroir qui ne recouvre pas tout l’écran (discussion de la communauté Shopify 275308). Un tiroir qui occupe l’écran d’un bord à l’autre masque la page située derrière ; une bande assombrie encore visible peut montrer plus clairement que le panneau peut être fermé.

Avant de modifier le code, explorez les réglages de votre thème. Sur les thèmes modernes, le comportement du menu mobile est géré dans l’éditeur de thème sous la section Entête. De plus, certains thèmes permettent de contrôler l’entête indépendamment pour le mobile et l’ordinateur.

Si votre thème ne propose pas de curseur de largeur pour le tiroir mobile, vous pouvez tester une limitation de largeur maximale (max-width) sur votre thème dupliqué :

/* Example max-width constraint for a slide-out drawer on a duplicate theme; the value is only a placeholder, pick one that suits your design */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
  .menu-drawer {
    max-width: 80vw;
  }
}

Lors de cet ajustement, assurez-vous de conserver trois aspects fondamentaux : le fait que Drawer opens full width soit maîtrisé, que la zone d’arrière-plan overlay stays visible reste perceptible pour fermer le panneau d’un simple toucher, et qu’un easy close button soit accessible au sommet. Pour découvrir des modèles de conception de tiroirs, consultez notre guide sur les mobile drawer menu best practices.

Figure 2: Concept illustration — Side-by-side phone mockups of a full-width Shopify mobile drawer and a partial-width drawer with the page visible behind.

Trade-offs: when code fixes stop being worth it

Corriger les fichiers CSS et Liquid pour résoudre un dysfonctionnement de menu mobile peut apporter un soulagement immédiat, mais nécessite de mesurer les coûts de maintenance.

D’abord, le code personnalisé doit souvent être réintégré après une mise à jour. Dans un échange sur le thème Dawn, un marchand a indiqué que la mise à jour vers la version 11.0 avait corrigé son problème de menu, mais qu’il devrait réintégrer ses modifications personnalisées (discussion de la communauté Shopify 259424). Après une mise à jour de thème, les ajouts faits dans des fichiers comme base.css, main.css ou theme.liquid peuvent devoir être appliqués de nouveau.

Ensuite, les extraits trouvés sur les forums sont propres à chaque thème. Le sélecteur de l’exemple main.css (.main-menu__disclosure.is-open > .main-menu__content) n’a rien de commun avec celui de l’exemple Dawn base.css (.menu-opening .menu-drawer). Copier du CSS conçu pour un thème dans un autre peut ne rien faire ou provoquer des bugs d’affichage inattendus. Empiler plusieurs correctifs rend aussi le diagnostic plus difficile.

Néanmoins, une application n’est pas toujours la solution appropriée. Voici des situations où vous ne devriez PAS opter pour une application :

• Une simple ligne de balisage manquante : Si le menu a cessé de fonctionner parce que les premières lignes de theme.liquid ont été supprimées lors de l’ajout d’une balise ou d’une application, rétablir ces lignes peut régler le problème simplement.
• Le thème propose déjà le réglage : Si votre thème inclut des options pour la largeur du tiroir ou l’affichage des sous-menus dans l’entête, exploiter ces fonctionnalités natives est souvent plus simple.
• Gestion supplémentaire : Installer une application introduit un nouvel élément à configurer et à surveiller dans votre boutique.

Where Navi+ fits

Si la navigation mobile native de votre thème ne vous offre pas les commandes de mise en page nécessaires, ou si vous souhaitez éviter d’avoir à réinjecter du code CSS après chaque mise à jour, Navi+ propose une méthode alternative.

Navi+ Mobile Menu met à votre disposition un tiroir de navigation dédié, géré intégralement depuis l’interface de l’application :

• Largeur de tiroir personnalisable : Définissez la largeur du tiroir mobile dans les réglages de l’application (les nouveaux menus démarrent avec un préréglage de 80 %) afin qu’il n’ait pas à occuper tout l’écran.
• Styles de sous-menus au choix : Choisissez si les sous-menus glissent horizontalement dans un nouveau volet ou se déploient verticalement sur place, façon accordéon.
• Voile de fond et blocage du défilement : Vous pouvez définir un fond assombri et le blocage du défilement de la page pendant que le tiroir est ouvert ; les menus prennent en charge jusqu’à trois niveaux de navigation.
• Barre d’onglets inférieure fixe : Complétez votre menu hamburger par une barre fixe au bas de l’écran qui reste visible pendant la navigation.

Il convient de préciser le périmètre de Navi+ : l’application ne répare pas les fichiers de thème endommagés et ne corrige pas le tiroir natif défaillant de votre thème. Elle remplace la navigation mobile par un système indépendant lorsque vous préférez ne pas intervenir dans le code.

If you’ve re-applied the same menu fix after every theme update, you can try building the mobile drawer in Navi+ instead — set the drawer width and submenu style in the app, preview it on your phone, and keep your theme files untouched.

Pour analyser les formats de menu adaptés à la structure de votre catalogue, explorez nos conseils pour choose the right menu type et notre guide de mise en place d’une bottom tab bar on mobile.

Action checklist after the fix

Une fois les correctifs appliqués sur votre thème dupliqué, validez ces 7 critères avant toute publication en direct :

• Ouverture et fermeture bilatérales : Vérifiez que le tiroir s’ouvre dès que vous touchez l’icône hamburger, et se referme aussi bien via le bouton de fermeture (X) qu’en touchant le fond assombri.
• Déploiement des sous-menus : Touchez chaque catégorie parente pour vous assurer que les listes imbriquées s’ouvrent sans sautillement ni navigation intempestive.
• Conformité des zones de frappe : Contrôlez que chaque lien, icône de flèche et bouton de fermeture respecte le critère WCAG 2.2 SC 2.5.8 avec une dimension minimale d’au moins 24 x 24 pixels CSS, avec quelques exceptions (normes W3C de dimensionnement).
• Tests multi-appareils : Testez le thème sur un appareil iOS (Safari) et un appareil Android (Chrome) pour repérer les comportements tactiles propres à chaque système.
• Documentation des retouches : Notez soigneusement chaque règle CSS ou modification Liquid apportée afin de pouvoir les réintégrer facilement lors des prochaines mises à jour.
• Évaluation des alternatives visibles : Gardez en mémoire que, selon les recherches du Nielsen Norman Group, “the hamburger menu is not so universal that everyone knows it or immediately looks for it” (recherches NN/g sur la navigation mobile). Pensez à compléter le tiroir par une navigation beyond the hamburger menu.
• Publication après validation : Publiez votre thème dupliqué uniquement lorsque tous les contrôles ci-dessus sont réussis.

FAQ

Why won’t my Shopify hamburger menu open?

Le plus souvent, l’élément du tiroir est masqué par une règle CSS prioritaire ou les balises d’entête dans theme.liquid ont été effacées lors de l’ajout d’une balise ou d’un script. Consultez la console de votre navigateur pour identifier d’éventuelles erreurs JavaScript et désactivez les applications récentes.

How do I make a submenu open when I tap the parent item?

Dans l’administration Shopify sous Contenu > Menus, glissez et imbriquez les éléments enfants sous leur élément parent. De nombreux thèmes transforment l’élément parent en bouton de déploiement ; d’autres comportements nécessitent un réglage de thème ou du CSS.

How many submenu levels does Shopify support?

La navigation Shopify prend en charge un élément de premier niveau avec jusqu’à deux niveaux de menus déroulants imbriqués sous lui, ce qui permet trois niveaux hiérarchiques au total. Votre thème actif peut aussi devoir être conçu pour afficher ces trois niveaux.

Will my CSS fix disappear when I update my theme?

Souvent, oui. Le code ajouté directement dans base.css ou main.css doit fréquemment être réintégré après le passage à une nouvelle version de thème. Pensez toujours à dupliquer votre thème avant toute modification et conservez un historique de vos personnalisations.

Why do hover menus misbehave on phones?

De nombreux écrans tactiles ne permettent pas de survoler confortablement ; MDN indique que beaucoup d’appareils mobiles n’émulent le survol qu’avec un appui long peu pratique. Lorsqu’une règle :hover de bureau se déclenche au toucher, un menu déroulant peut s’ouvrir puis se refermer de façon inattendue.

Can I change the width of the mobile drawer?

Selon votre thème, vous pouvez souvent régler la largeur du tiroir mobile directement dans l’éditeur de thème sous la section Entête. Si cette option est absente, vous pouvez définir une règle max-width en CSS ou recourir à une application dédiée intégrant ce paramètre.

Sources

• Shopify Help Center: Drop-down menus (help.shopify.com)
• Shopify Help Center: Duplicating themes (help.shopify.com)
• MDN Web Docs: @media (hover) (developer.mozilla.org)
• W3C: WCAG 2.2 Target Size (Minimum) (w3.org)
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger (nngroup.com)
• fudge.ai: How to Change Mobile Menu Behavior in Shopify (fudge.ai)
• Shopify Community: Why isn’t my online store menu opening on mobile devices? (community.shopify.com)
• Shopify Community: Why is my menu not showing on mobile when I click the hamburger icon? (community.shopify.com)
• Shopify Community: Mobile menu is not working for my store (community.shopify.com)
• Shopify Community: Menu doesn’t work on mobile (community.shopify.com)
• Shopify Community: Why is the mobile menu not functioning on Dawn theme? (community.shopify.com)
• Shopify Community: How to fix a menu opening fully on mobile? (community.shopify.com)
• Shopify Community: Dawn theme header expand without clicking (community.shopify.com)