Menus et navigation sur Showit : sticky menu, drop-down et navigation mobile

La navigation de ton site, c’est le premier truc que tes visiteurs utilisent – et souvent le dernier réglage auquel tu penses. Pourtant un menu qui se comporte mal (qui disparaît au scroll, qui ne s’ouvre pas sur mobile, qui n’a pas de sous-catégories) peut faire perdre des clientes avant même qu’elles aient vu ton travail. Ce guide couvre les 4 types de menus disponibles dans Showit et comment configurer ta navigation mobile correctement.

La base : comment fonctionne un menu dans Showit

Dans Showit, il n’y a pas de composant « menu » prédéfini. Un menu, c’est simplement un canvas contenant des zones de texte avec des click actions qui pointent vers tes pages. C’est tout. Cette liberté te permet de créer exactement le menu que tu veux visuellement – mais ça demande de comprendre les réglages.

Conseil clef : utilise un Site Canvas pour ton menu. Un Site Canvas s’affiche sur toutes les pages où tu l’ajoutes – quand tu modifies un élément, le changement se propage partout automatiquement. C’est le seul moyen d’avoir un menu cohérent sur tout ton site sans tout refaire à la main.

Ajouter ou modifier un lien dans ton menu

Pour ajouter une nouvelle page à ta navigation :

1. Clique sur ton canvas de menu → bouton bleu Edit Site Canvas
2. Ajoute une zone de texte, tape le nom de la page, aligne-la avec les autres liens
3. Sélectionne la zone de texte → onglet Click Action → Link → choisis la page ou le canvas cible

Le sticky menu : rester visible au scroll

Le sticky setting, c’est le réglage qui fait rester ton menu visible pendant que l’utilisatrice scrolle. Tu le trouves dans le panneau de droite, onglet Canvas, quand tu sélectionnes le canvas de menu.

Les 5 options sticky

• None – le canvas scrolle normalement avec la page
• Top – reste collé en haut en permanence dès le chargement
• Bottom – reste collé en bas en permanence (utile pour un CTA fixe)
• Top on Scroll – apparaît en haut seulement quand l’utilisatrice commence à scroller
• Bottom on Scroll – apparaît en bas au scroll

<aside> ⚠️ ⚠️ Le stacking order du canvas sticky doit être plus élevé que celui des autres canvases. Sinon ton menu passera derrière tes sections. Et si tu utilises Sticky → Top sur un menu fixe en haut, ajoute un canvas tampon vide de la même hauteur juste en dessous pour éviter que le premier canvas de contenu se retrouve caché sous le menu.

</aside>

Scroll Links Under

Quand tu cliques sur un lien d’ancrage (vers un canvas plus bas sur la page), Showit calcule par défaut le haut du navigateur comme point d’arrivée. Si ton menu est sticky, il va couvrir le début de la section. Scroll Links Under corrige ça : coche cette option et Showit décale l’arrivée du scroll juste sous le menu.

Menu transparent (effet flottant)

Pour que les éléments de ton menu semblent flotter au-dessus du contenu sans fond visible :

1. Sélectionne le canvas sticky → onglet Canvas Background → passe la couleur en transparent
2. Réduis la hauteur du canvas à 1px en faisant glisser l’icône de hauteur sur le bord gauche

💡 Ajoute des formes (rectangles) derrière tes textes de menu pour qu’ils restent lisibles sur tous les fonds. Un texte flottant blanc sur une image claire, ça ne se voit pas.

Le drop-down menu : créer des sous-catégories

Un drop-down menu dans Showit s’appuie sur les Canvas Views – deux états différents du même canvas : View 1 = menu fermé, View 2 = menu ouvert avec les sous-liens. Un clic bascule d’une vue à l’autre.

<aside> 🚫 🚫 Showit ne propose pas de drop-down au survol (hover). Seul le clic est disponible, par choix délibéré de la plateforme : le hover fonctionne mal sur les écrans tactiles.

</aside>

1. Sur ton canvas de menu, crée une Canvas View → sélectionne tous tes liens et glisse-les dans cette View 1
2. Duplique cette Canvas View → renomme-la View 2 → ajoute un rectangle de fond + les sous-liens dans View 2

1. Monte le stacking order du canvas de menu au-dessus de tous les autres canvases de la page

1. Dans View 1 : sur le lien « parent » (ex : Services) → Click Action → Link → Canvas → This Canvas → View 2 (ouvre le dropdown)

1. Dans View 2 : sur le même lien « parent » → Click Action → Link → Canvas → This Canvas → View 1 (ferme le dropdown)

Astuce : tu peux aussi fermer le dropdown automatiquement au scroll. Crée un canvas transparent de 1px juste sous ton header, puis ajoute une Scroll Action dessus : Trigger → Canvas → Change Canvas View → (ton canvas de menu) → View 1. Propre et fluide.

Le pop-out menu : l’effet hamburger

Le pop-out menu est un menu entièrement caché au départ, qui apparaît quand on clique sur une icône hamburger (☰). Idéal pour les designs minimalistes ou les portfolios où la navigation ne doit pas concurrencer les visuels.

Il repose sur deux site canvases distincts : Menu Closed et Menu Open.

Canvas Menu Closed

Contient l’icône hamburger visible en permanence. Réglages à appliquer : Sticky → Top on Scroll, fond transparent. Click Action sur l’icône : Show Canvas → Menu Open

Canvas Menu Open

Contient tous les liens de navigation. Réglages obligatoires : Hidden to Start (invisible au chargement) + Sticky → Top. Sur chaque lien et sur l’icône de fermeture (✕) : Click Action → Hide Site Canvas → This Site Canvas

Animations d’entrée

Pour contrôler comment le Menu Open apparaît (glissement du haut, du côté, fondu…) : sélectionne le canvas Menu Open → onglet Animation dans le panneau de droite.

La navigation mobile : les réglages qui font tout fonctionner

Sur mobile, la plupart des designs Showit utilisent un menu hamburger caché par défaut. Si le tien ne s’ouvre plus, ou ne se ferme pas, il y a 99% de chances que ce soit un problème de réglages sur le canvas Mobile Nav.

Les 3 réglages obligatoires du canvas Mobile Nav

• Stacking Order – doit être plus élevé que tous les autres canvases de la page
• Sticky – réglé sur Top pour que le menu s’affiche bien au-dessus du contenu
• Hidden to Start – coché, pour que le menu reste invisible jusqu’à ce qu’on clique sur l’icône

L’icône hamburger

Sur l’icône hamburger de ton header mobile : Click Action → Add Action → Show Canvas → Mobile Nav (ou le nom de ton canvas de menu mobile).

Les liens du menu mobile

Sur chaque lien de navigation et sur l’icône X de fermeture : ajoute une deuxième click action → Hide Site Canvas → This Site Canvas. Sans ça, le menu reste ouvert après le clic.

Dépannage rapide

• Le menu ne s’ouvre sur aucune page – vérifie que le canvas Mobile Nav est bien présent sur chaque page (les deux canvases : le header avec l’icône ET le canvas menu)
• Les réglages sont corrects mais ça ne marche toujours pas – si tu utilises un Site Canvas, vérifie que les réglages de page (stacking order, sticky, hidden) correspondent aux réglages du Site Canvas. Les deux doivent être identiques.
• Le menu s’ouvre mais ne se ferme pas – vérifie que chaque lien et l’icône X ont bien la click action Hide Site Canvas → This Site Canvas

Ce que tu peux faire maintenant

1. Vérifie que ton menu principal est sur un Site Canvas – si ce n’est pas le cas, convertis-le pour n’avoir qu’un seul endroit à maintenir
2. Active le sticky setting sur ton canvas de menu (Top ou Top on Scroll) et coche Scroll Links Under si tu as des ancres dans ta navigation
3. Vérifie les 3 réglages de ton canvas Mobile Nav (stacking order, sticky top, hidden to start) sur chaque page de ton site