Comment ajuster la taille d'un menu dans une application de navigation : dimensionnement de la barre d'onglets, du menu mobile et du méga menu sur Shopify

Quick Answer: How to Adjust Menu Size in a Navigation App

Ouvrez les paramètres de design du menu et modifiez séparément cinq éléments : taille du texte, hauteur des éléments, largeur du menu ou du tiroir, taille des icônes et espacement des zones tactiles. Gardez des zones tactiles d’au moins 24 x 24 pixels CSS, vérifiez sur un téléphone étroit et n’utilisez du CSS personnalisé que lorsqu’aucun réglage n’existe.

Pour ajuster la taille du menu de votre boutique sans écrire de code, suivez ces cinq étapes :

1. Sélectionnez le type de menu : Ouvrez votre application de navigation et choisissez la mise en page souhaitée (barre d’onglets, tiroir mobile ou méga menu).
2. Définissez la taille du texte : Ajustez la typographie séparément pour les liens principaux et les sous-éléments afin d’établir une hiérarchie visuelle claire.
3. Calibrez la hauteur des lignes : Augmentez le rembourrage vertical ou définissez une hauteur minimale (min-height) pour faciliter le toucher au pouce.
4. Ajustez la largeur et les icônes : Élargissez le tiroir ou le sous-menu pour afficher les longs titres de collections sans coupure, puis ajustez la taille des icônes.
5. Testez sur smartphone étroit : Vérifiez le menu sur un appareil réel ou à une largeur de 320 pixels CSS pour contrôler la lisibilité et le confort tactile.

What “Menu Size” Actually Means: Five Dimensions

Lorsqu’un menu paraît disproportionné sur mobile, les marchands cherchent souvent un curseur unique pour le rendre plus grand ou plus petit. En conception web, la “taille du menu” n’est pas un paramètre unique. Elle résulte de cinq dimensions géométriques distinctes.

Modifier une dimension sans ajuster les autres déséquilibre immédiatement la mise en page. Par exemple, augmenter la taille du texte sans élargir le tiroir provoque la troncature des noms de collections. De même, agrandir les icônes sans rehausser la barre d’onglets compresse visuellement les boutons.

Ces dimensions sont exprimées en pixels CSS (px). Un pixel CSS est une unité abstraite utilisée par les navigateurs web. Sur les écrans de smartphones modernes à haute densité, un pixel CSS correspond à plusieurs pixels physiques de l’appareil.

Pour ajuster également les palettes de couleurs, les polices, les effets de survol ou les ombres, consultez notre guide complet pour modifier les couleurs et polices du menu.

Why Theme Menus Often Look Too Small or Too Big on Mobile

Une source fréquente de confusion pour les marchands Shopify réside dans la séparation des outils de gestion.

Dans l’administration Shopify standard, les liens et la hiérarchie sont gérés dans Boutique en ligne > Navigation. Cependant, l’apparence visuelle, la typographie et la mise en page responsive du menu mobile sont configurées exclusivement dans l’Éditeur de thème (fudge.ai).

Shopify Admin
 ├── Boutique en ligne > Navigation  --> Hiérarchie des liens & URLs (Contenu)
 └── Boutique en ligne > Thèmes
      └── Éditeur de thème           --> Mise en page & styles visuels (Affichage)

De nombreux thèmes Shopify n’ont pas de réglage dédié à la taille du tiroir mobile ni à la hauteur des lignes ; les réponses des forums communautaires sont donc souvent des extraits de CSS. Les réglages disponibles varient d’un thème à l’autre : commencez par vérifier l’éditeur de votre propre thème.

Par ailleurs, un en-tête d’ordinateur se comporte très différemment d’une interface mobile. Lorsque des liens horizontaux sont regroupés dans un menu hamburger, une taille de police équilibrée sur un ordinateur portable devient souvent minuscule ou excessivement grande sur l’écran d’un téléphone. Découvrez ces contraintes dans notre étude sur les limites des menus de thèmes Shopify.

Adjust Tab Bar Size: Icon, Label and Bar Height

Une barre d’onglets inférieure maintient les destinations prioritaires à portée naturelle du pouce. Cependant, si cette barre est trop étroite ou encombrée, la précision du toucher diminue fortement.

Figure 1 : Illustration conceptuelle (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

Dans une application de navigation, vous équilibrez trois paramètres principaux :

1. Taille des icônes : Le symbole graphique représentant chaque section (Accueil, Catalogue, Recherche, Panier).
2. Taille du texte du libellé : Le court intitulé placé sous ou à côté de l’icône.
3. Hauteur de la barre : La hauteur verticale totale du conteneur fixé en bas de l’écran.

Lorsque vous augmentez la taille des icônes pour améliorer leur reconnaissance, vous devez également augmenter la hauteur de la barre. Si vous conservez une hauteur fixe, les éléments se retrouvent écrasés contre les bordures.

Gardez des libellés très courts—idéalement un mot comme “Accueil”, “Recherche” ou “Panier”. Un texte trop long est tronqué ou empiète sur l’onglet voisin. Chaque élément doit offrir une zone tactile confortable. Pour approfondir l’ergonomie mobile, consultez notre dossier sur les barres d’onglets et navigation ergonomique pour le pouce.

Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width

Le menu tiroir coulissant est le modèle standard sur mobile. Organisant les collections en liste verticale, son dimensionnement nécessite d’équilibrer la hiérarchie du texte, l’espacement des lignes et la largeur du conteneur.

1. Hiérarchie de taille de texte

Évitez d’appliquer une taille identique à tous les niveaux. Vos catégories principales (Niveau 1) nécessitent un texte plus grand pour guider le regard. Les sous-catégories (Niveaux 2 et 3) doivent être légèrement plus petites et indentées.

2. Espacement des lignes par hauteur minimale et marge

Si les liens sont trop rapprochés verticalement, les erreurs de clic augmentent. Utilisez les commandes Min Height (hauteur minimale de ligne) ou le rembourrage vertical Item Padding. Une hauteur minimale garantit un espace suffisant, même pour les libellés courts.

3. Largeur du tiroir (Drawer Width)

La largeur du tiroir détermine l’espace horizontal occupé à l’ouverture. Si le tiroir est trop étroit, les noms de collections longs s’affichent sur plusieurs lignes de manière inégale.

Lorsque vous augmentez la taille de police, élargissez proportionnellement le tiroir pour que les libellés tiennent sur une ligne. Validez toujours votre affichage sur écran étroit à 320 pixels CSS (W3C Reflow). Pour la structure des menus hors-champ, explorez nos meilleures pratiques pour le menu tiroir mobile.

Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images

Sur ordinateur, les méga menus organisent de vastes catalogues en panneaux déroulants multi-colonnes. Un dimensionnement réussi repose sur la largeur des panneaux, la structure des colonnes et la taille des éléments visuels.

Sous-menus à colonne unique vs panneaux multi-colonnes

Les applications distinguent les listes simples des grands panneaux :

• Sous-menus à colonne unique : Utilisez le paramètre Submenu Width pour fixer la largeur du panneau (paramètre de largeur de sous-menu). Cela évite que le menu ne se contracte excessivement ou ne s’étire trop.
• Panneaux multi-colonnes à pleine largeur : Pour les catalogues riches, ajustez la largeur totale afin d’offrir un espace généreux entre chaque colonne.

Dimensions du Méga Menu
 ├── Largeur de sous-menu (Panneaux déroulants à 1 colonne)
 ├── Largeur pleine expansion (Dispositions multi-colonnes)
 ├── Titres de colonnes (Hiérarchie visuelle au-dessus des sous-liens)
 └── Images promotionnelles (Largeur maîtrisée pour éviter les débordements)

Hiérarchie entre titres de colonnes et sous-liens

Dans une disposition multi-colonnes, les en-têtes guident le visiteur. Rendez ces titres plus grands et plus gras que les liens enfants sous-jacents afin de faciliter la lecture rapide.

Maîtriser la taille des images promotionnelles

De nombreux méga menus intègrent des bannières ou vignettes de produits. Les images occupent un espace horizontal important. Si le panneau paraît surchargé, réduisez d’abord la taille des images avant d’élargir démesurément le conteneur du menu.

Les écrans mobiles sont bien plus étroits que les panneaux de bureau : vérifiez la version mobile d’un méga menu séparément de la version ordinateur, au lieu de supposer que les dimensions de bureau s’appliquent aussi.

Pick a Size That Works for Thumbs: Tap Targets and Readability

Ne définissez pas les dimensions de vos menus au hasard. Les normes d’accessibilité et la recherche ergonomique fournissent des repères rigoureux pour les cibles tactiles et la lisibilité.

Selon les règles WCAG 2.2 du World Wide Web Consortium, le critère de succès 2.5.8 (Target Size Minimum, Niveau AA) exige des cibles tactiles d’au moins 24 by 24 CSS pixels, sauf exceptions spécifiques (W3C Target Size Minimum).

Pour une ergonomie tactile supérieure, le critère 2.5.5 (Target Size Enhanced, Niveau AAA) recommande des cibles d’au moins 44 by 44 CSS pixels (W3C Target Size Enhanced). Le W3C préconise d’atteindre cette taille minimale indépendamment des espacements environnants.

Les recherches du Nielsen Norman Group indiquent que la taille physique minimale d’une cible tactile devrait être d’environ 1cm by 1cm (0.4in by 0.4in) (NN/g Touch Target Size). NN/g souligne qu’une cible doit d’abord être suffisamment grande avant d’être bien espacée.

De plus, le critère WCAG 1.4.4 (Resize Text) stipule que le texte doit pouvoir être agrandi jusqu’à 200 % sans outil d’assistance et sans perte de contenu ou de fonctionnalité (W3C Resize Text). Pour approfondir ce sujet, consultez notre guide d’accessibilité de la navigation.

Test on a narrow screen and at larger text

La conformité exige de vérifier votre menu sur les petits écrans. D’après le critère WCAG 1.4.10 (Reflow), les contenus à défilement vertical doivent rester pleinement fonctionnels sur une largeur équivalente à 320 CSS pixels sans défilement horizontal (W3C Reflow).

Lors du test de votre menu :

• Ouvrez l’inspecteur de votre navigateur et réglez la largeur sur 320 pixels CSS.
• Déroulez le tiroir mobile et les sous-menus pour vérifier l’absence de coupure horizontale.
• Augmentez la taille de police système pour contrôler le confort tactile et la lisibilité.

When You Still Need Custom CSS (and How to Test It Safely)

La plupart des dimensionnements s’effectuent via les commandes visuelles de votre application. Si votre thème impose des règles strictes ou qu’un réglage spécifique fait défaut, du CSS personnalisé peut être utile.

Gardez à l’esprit les règles de la plateforme Shopify :

• Portée globale du thème : Les règles CSS globales ajoutées dans les paramètres du thème s’appliquent à toutes les pages de votre boutique en ligne, à l’exception de la page de paiement (Shopify Adding Custom CSS).
• Limite de caractères : Shopify restreint le champ CSS personnalisé global à 1500 caractères (Shopify Adding Custom CSS).
• Sauvegarde obligatoire : Shopify recommande formellement de dupliquer votre thème avant toute modification de code ou de CSS (Shopify Duplicating Themes) afin de pouvoir annuler les changements indésirables.
• Variabilité des classes : Les sélecteurs CSS changent considérablement selon les thèmes. Copier des extraits de forums sans vérifier leur pertinence génère souvent des conflits d’affichage.

Visionnez cette démonstration vidéo sur la modification de la taille de police dans un thème Shopify :

Vidéo : Démonstration de l’ajustement de la taille de police de menu dans un thème Shopify.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Lors du redimensionnement d’un menu, vous pouvez rencontrer trois problèmes fréquents :

1. Les modifications de taille n’apparaissent pas

• Mauvais niveau modifié : Vérifiez si vous avez modifié le Niveau 1 ou les Niveaux 2/3. Ajuster le Niveau 1 ne modifie pas automatiquement les sous-éléments.
• Mode d’aperçu de l’appareil : Assurez-vous de modifier le bon profil d’affichage. Les changements pour ordinateur n’affectent pas la vue mobile.
• Mise en cache du navigateur : Videz le cache ou testez votre boutique dans une fenêtre de navigation privée.
• Règles CSS du thème : Des sélecteurs plus spécifiques dans votre thème peuvent écraser les styles de l’application. Inspectez l’élément pour identifier la règle dominante.

2. Texte du menu tronqué (Coupure de texte)

Comme le souligne le W3C, des mots trop longs pour l’espace horizontal disponible finissent par être tronqués (W3C Resize Text).

Solutions :

• Élargir le conteneur : Augmentez la largeur du tiroir ou du sous-menu.
• Modérer la taille de police : Réduisez légèrement la taille du texte.
• Raccourcir les libellés : Utilisez des termes de navigation plus synthétiques.

3. Retour à la ligne vs points de suspension

Selon la documentation du MDN Web Docs, l’affichage de points de suspension (...) nécessite la combinaison de text-overflow: ellipsis, overflow: hidden et white-space: nowrap (MDN text-overflow).

Un passage à la ligne sans points de suspension correspond à un comportement textuel normal. Ce n’est pas une erreur : autoriser deux lignes est souvent préférable à couper des mots, tant que la hauteur de ligne s’adapte correctement.

Figure 3 : Illustration conceptuelle — Comparaison d’un libellé tronqué avec points de suspension dans un tiroir étroit et d’un affichage sur une ligne dans un tiroir élargi.

Trade-offs: What Resizing Cannot Fix

Le redimensionnement améliore la lisibilité et l’ergonomie, mais présente des limites inhérentes :

• Perte de densité d’information : Un texte plus grand et des lignes plus hautes facilitent le toucher mais réduisent le nombre d’éléments visibles à l’écran. Les visiteurs doivent faire défiler davantage.
• Un catalogue surchargé ne se règle pas en réduisant la police : Réduire simplement la police de dizaines de collections désordonnées ne rend pas le menu plus clair. Cela crée un bloc compact illisible. Réorganisez votre catalogue au lieu de miniaturiser les caractères.
• Perte de contexte visuel de la boutique : Un tiroir couvrant toute la largeur de l’écran garantit que les longs libellés tiennent, mais occulte entièrement la page. Conserver une bordure visible de la boutique aide les acheteurs à garder leurs repères.
• Ergonomie mobile vs ordinateur : Des dimensions équilibrées sur écran large conviennent rarement aux écrans tactiles. Évaluez chaque dimension séparément sur les deux supports.

Where Navi+ Fits

Si votre thème Shopify ne propose aucun réglage pour la largeur du tiroir ou la barre d’onglets, Navi+ Tab Bar & Mega Menu vous offre des commandes visuelles pour la Tab Bar, le Mobile Menu et le Mega Menu.

Fonctionnalités intégrées :

• Typographie par niveau : Réglez la Font Size (en px) séparément pour les liens de Niveau 1, Niveau 2 et Niveau 3 (paramètres de conception de niveau 1 de Navi+).
• Hauteur de ligne et marges : Définissez la Min Height (en px) et ajustez le rembourrage vertical Item Padding par niveau (paramètres de conception de niveau 1 de Navi+).
• Dimensions des icônes : Ajustez la Icon Size (en px) pour les pictogrammes de navigation sur chaque niveau (paramètres de conception de niveau 1 de Navi+).
• Largeurs de tiroir et sous-menu : Modifiez la Submenu Width des menus simples (paramètre de largeur de sous-menu) et la largeur pleine expansion des méga menus.
• Dimensions des conteneurs : Définissez la hauteur de la barre d’onglets inférieure et la largeur du tiroir mobile (sur mobile et sur ordinateur).
• Syntaxe d’espacement responsive : Les champs acceptent la syntaxe mobile | desktop pour attribuer des valeurs distinctes à chaque appareil dans un seul champ.
• Structure claire en 3 niveaux : Prise en charge jusqu’à 3 niveaux hiérarchiques pour préserver une navigation limpide.

Si votre thème n’a aucun réglage pour la largeur du tiroir ou la hauteur de la barre d’onglets, Navi+ Tab Bar & Mega Menu vous permet de régler la taille du texte, la hauteur des éléments, la taille des icônes et la largeur du menu pour chaque niveau, puis de prévisualiser avant de publier. Essayez d’abord sur un thème dupliqué.

Action Checklist

Utilisez cette liste en 8 points pour valider les dimensions de votre menu avant mise en ligne :

• Dupliquer votre thème : Créez une sauvegarde de votre thème actif avant de modifier le code ou le CSS (Shopify Duplicating Themes).
• Définir la taille du texte par niveau : Configurez des tailles de police distinctes pour les catégories mères et les sous-éléments.
• Fixer une hauteur minimale de ligne : Réglez le rembourrage ou la hauteur minimale pour un toucher aisé.
• Ajuster la largeur du conteneur : Adaptez la largeur du tiroir ou du sous-menu à vos plus longs titres de collections.
• Équilibrer les icônes : Ajustez la taille des icônes en proportion de la hauteur du conteneur pour éviter l’écrasement.
• Valider les cibles tactiles : Assurez-vous que chaque élément interactif mesure au moins 24×24 pixels CSS (W3C Target Size Minimum).
• Tester à 320 pixels CSS : Contrôlez l’affichage sur écran de 320 pixels CSS sans apparition de défilement horizontal (W3C Reflow).
• Vérifier l’absence de coupure sous zoom : Examinez les libellés sous un zoom de 200 % pour exclure toute troncature imprévue (W3C Resize Text).

FAQ

How do I make the mobile menu text bigger without code?

Utilisez les réglages typographiques intégrés de votre thème ou de votre application de navigation. Alors que de nombreux thèmes Shopify requièrent des modifications de code CSS (fudge.ai), une application comme Navi+ propose un réglage de taille de police pour chaque niveau de menu (paramètres de conception de niveau 1 de Navi+).

How wide should a mobile menu drawer be?

Il n’existe pas de largeur fixe universelle. Le tiroir doit laisser apparaître une partie de l’arrière-plan de la boutique pour préserver les repères du visiteur, tout en affichant confortablement les libellés sans coupure sur un écran de 320 pixels CSS (W3C Reflow).

How big should menu tap targets be?

Selon la norme WCAG 2.2 AA, les cibles tactiles doivent mesurer au moins 24 par 24 pixels CSS (W3C Target Size Minimum), le niveau AAA conseillant 44 par 44 pixels CSS (W3C Target Size Enhanced). Le Nielsen Norman Group recommande une dimension physique d’environ 1cm par 1cm (NN/g Touch Target Size).

Why is my menu text cut off?

Le texte du menu est tronqué lorsqu’un mot est plus long que l’espace horizontal du conteneur (W3C Resize Text). Élargissez le tiroir ou le sous-menu, réduisez légèrement la taille de police, ou raccourcissez le libellé.

Do I need to duplicate my theme before adding CSS?

Oui. Shopify conseille expressément de dupliquer votre thème avant toute modification de code ou de CSS pour annuler simplement les erreurs d’affichage (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Critère 2.5.8 sur la taille minimale des cibles (Niveau AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Critère 2.5.5 sur la taille optimale des cibles (Niveau AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Critère 1.4.4 sur le redimensionnement du texte jusqu’à 200 %.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Critère 1.4.10 sur le défilement vertical à 320 pixels CSS.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Recherche par Aurora Harley sur les dimensions physiques des cibles tactiles.
• Shopify Help Center: Duplicating Themes — Documentation sur la sauvegarde des fichiers de thèmes.
• Shopify Help Center: Adding Custom CSS to Themes — Documentation sur la portée et les limites de caractères du CSS.
• fudge.ai: How to Change the Mobile Menu in Shopify — Guide de configuration du menu mobile dans l’Éditeur de thème.
• MDN Web Docs: text-overflow CSS Reference — Référence technique sur les propriétés text-overflow, overflow et white-space.
• Navi+ Help Center: Level 1 Design Settings — Documentation sur la taille de police, d’icône et hauteurs minimales.
• Navi+ Help Center: Layout Settings — Documentation sur la largeur de sous-menu et méga menus.