English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Voir la démo Commencer

FAQ

Question 1 : Comment empêcher mon menu Mega de desktop de s’enrouler sur deux lignes ?

Il existe deux situations qui peuvent casser la mise en page d’une barre de menu Mega de desktop : trop d’éléments de haut niveau, ou le site consulté dans une fenêtre plus étroite qu’un desktop standard. Deux paramètres sous Setting → Layout → Desktop règlent ce problème — aucun code requis.

Before — too many items wrap to a second line Home Shop Categories Sale Blog About Contact Support ⚠ The second row pushes page content down, and the header height changes unpredictably across screen sizes. After — "Menu overflow navigation" keeps it on one row Home Shop Categories Sale Blog › About Contact Support Items that don't fit (About, Contact, Support...) live behind the arrow button — click to reveal them, without wrapping.

Activez Show navigation arrows when menu overflows. La barre de haut niveau reste toujours sur une seule ligne ; les éléments qui ne tiennent pas sont cachés derrière un bouton flèche › au lieu de s’enrouler. Deux champs de couleur, Button background color et Arrow icon color, vous permettent de styliser le bouton.

Point de rupture du passage au mobile

Par défaut, tout écran plus étroit que 768 px bascule le menu complet en mode mobile, même s’il y a encore assez de place pour une disposition de desktop — courant sur les tablettes ou une fenêtre de navigateur redimensionnée. Réduisez le champ Breakpoint (px) pour garder la barre de desktop visible jusqu’à une largeur plus étroite.

Setting → Layout → Desktop ↔ Mobile switch breakpoint Screen width below which the menu switches to mobile 768 px › Menu overflow navigation Show navigation arrows when the menu overflows Both cards only appear for a Desktop Mega Menu — not Tabbar, FAB, Slide, or Mobile Mega Menu.
Default — fixed at 768px Mobile / Hamburger Desktop Mega Menu 768px After setting Breakpoint = 600 (+ overflow navigation enabled) Mobile / Hamburger Desktop (new range) Desktop Mega Menu 600px 768px The 600–768px range used to be hidden as mobile — it now keeps the desktop layout.

La nouvelle plage que cela ouvre (entre votre point de rupture et 768 px) est plus étroite qu’un desktop standard — activez également la navigation de débordement du menu, pour que les éléments de haut niveau ne s’enroulent pas dans cette plage.

Exemple : point de rupture = 600 avec navigation de débordement du menu activée :

Largeur d’écran Comportement
Inférieur à 600 px Menu mobile / hamburger
600 px – 768 px Menu Mega de desktop, le bouton flèche garde les éléments sur une seule ligne
Au-dessus de 768 px Menu Mega de desktop, comportement standard

Ces deux paramètres sont indépendants et n’affectent que le menu Mega de desktop — pas la barre TabBar, FAB, le menu Slide, ou le menu Mobile Mega Menu.

Question 2 : Comment puis-je afficher mon menu Mega de desktop en tant que menu Slide sur mobile ?

Parfois, vous voulez l’approche classique réactive : construire un menu Mega de desktop et le laisser se transformer en menu Slide (Hamburger) sur mobile automatiquement, au lieu de construire un menu mobile séparé à partir de zéro.

Point fort
Vous ne maintenez qu'un seul menu — la version de desktop. La copie mobile suit automatiquement, sans deuxième arborescence à maintenir en synchronisation.
Point faible
Le mobile en premier est la façon dont la navigation devrait être conçue aujourd'hui — les téléphones apportent la plupart des visites et souvent la plupart des revenus. Une arborescence comprimée à partir d'une large barre de desktop est vraiment de desktop en premier : trop d'interactions par lien, des groupes de style dropdown qui se lisent mal en tant que liste empilée, pas d'espace pour les raccourcis mobiles uniquement.

Pour la navigation principale d’un magasin, un menu conçu pour mobile dès le départ — un menu Slide, Grid, ou TabBar dédié — vaut généralement l’effort de maintenance supplémentaire.

Compromis : reflétez le menu Mega de desktop dans un menu Slide avec Smart responsive (étapes ci-dessous), et ajoutez un élément TabBar qui l’ouvre directement. Réglez le champ Link To de l’élément sur open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — en utilisant l’ID d’intégration du menu Slide — afin que les visiteurs mobiles obtiennent une véritable entrée de barre inférieure au lieu d’une icône hamburger cachée.

Configurez Smart responsive

Ouvrez votre menu Mega de desktop → Setting → Mobile → carte Smart responsive. Il incorpore une référence en direct de ce menu dans un menu Slide — vous continuez à éditer le contenu ici uniquement, et la version mobile se met à jour automatiquement.

Desktop Mega Menu — 3 columns Collections Women Dresses Tops Men New in Sale Info Size guide Shipping → Smart responsive Slide menu — flattened to 1 column Collections Dresses Tops New in Sale Size guide Shipping one tap reaches every link
  1. Cliquez sur Copy embed item pour copier ce modèle d’élément de menu.
  2. Collez-le au level 1 d’un menu Slide existant — ou créez-en un d’abord si vous n’en avez pas encore.

Les mises en page multi-colonnes sont automatiquement aplaties : les colonnes deviennent une liste verticale, les titres des colonnes sont supprimés, et une ligne de séparation est insérée là où les colonnes séparées avaient l’habitude d’être — afin que les visiteurs atteignent chaque lien en un seul tap au lieu de deux.

Une fois intégré, la carte affiche This menu already shows on mobile avec un lien direct vers le menu Slide, pour que vous puissiez le vérifier à tout moment.

Affinez la copie mobile
  • Masquez les éléments de desktop uniquement. Ouvrez l’élément sur le menu Mega de desktop → Visibility → activez Exclude when embedded. Il reste sur desktop et disparaît uniquement de la copie mobile.
  • Ajoutez des éléments mobiles uniquement. Le menu Slide n’est pas limité à ce que la référence apporte — ajoutez des éléments de niveau 1 réguliers directement à côté de l’élément intégré pour les choses que la barre de desktop n’a pas besoin : un bouton appel/WhatsApp, les heures du magasin, un sélecteur de langue, ou des liens qui vivent normalement dans l’en-tête ou le pied de page du thème. Ceux-ci vivent directement dans le menu Slide et ne touchent pas du tout la version de desktop.