Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Mise en forme de votre navigation

La navigation de votre site est un ensemble de liens qui redirigent les visiteurs vers le contenu du site. En général, la navigation est affichée en haut de votre site, mais certains templates de la version 7.0 acceptent une navigation dans les pieds de page ou dans les barres latérales.

Tous les sites comprennent des options qui permettent de modifier la police, la couleur et la taille des liens de votre navigation. Consultez ce guide pour découvrir comment personnaliser votre navigation sur n’importe quel site.

Avant de commencer

Trouver les ajustements de style de la navigation

La méthode pour modifier le style de votre navigation dépend de la version de votre site.

Les styles des liens de navigation sont principalement définis par l’en-tête de votre site. Dans l’éditeur d’en-tête, vous pouvez modifier :

  • La disposition de la navigation
  • Les couleurs de la navigation
  • La marge intérieure autour du texte
  • Si la navigation est fixe
  • L’aspect de la navigation sur ordinateur ou appareils mobiles

Vous pouvez également utiliser des options du panneau Styles du site pour modifier les polices et les tailles. Pour en savoir plus, consultez les sections ci-dessous.

Chaque famille de modèles possède ses propres styles de site. Il n'existe donc pas une seule règle pour mettre à jour vos liens de navigation. Suivez ces conseils pour trouver les options de style prises en charge par votre modèle :

  • Pour ouvrir les styles de site à partir du Menu principal, cliquez sur Design, puis sur Styles de site.
  • Recherchez les ajustements qui y sont associés en parcourant les ajustements disponibles à gauche. Les ajustements comportent généralement le mot Navigation.
  • Vous pouvez également survoler la navigation de votre site dans l'aperçu du site situé à droite. Lorsqu'un cadre bleu apparaît, cliquez sur n'importe quel lien de navigation. Cela permet de filtrer les réglages qui n'affectent pas les liens de navigation. Lorsque vous avez terminé, cliquez sur Afficher tout pour revenir à la vue principale.

Voici un exemple des ajustements de navigation dans le template Thorne, qui fait partie de la famille Brine :

thorne_site_styles.gif

Modifier la police et la taille

La méthode pour modifier la police de la navigation dépend de la version de votre site.

Par défaut, la police de votre navigation correspond à la police utilisée sur l’ensemble de votre site. Pour définir un type ou une taille de police différent pour votre navigation :

  1. Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis cliquez sur Polices.
  2. Sous Styles de texte généraux, cliquez sur Attribuer des styles.
  3. Cliquez sur Navigation du site.
  4. Pour modifier la police, cliquez sur Style, puis choisissez Personnalisé. Choisissez une nouvelle famille de polices, une nouvelle épaisseur, un nouveau style et d’autres détails. Cliquez sur Enregistrer pour appliquer vos modifications.
  5. Pour modifier la taille, cliquez sur Taille, puis choisissez une taille de Paragraphe prédéfinie ou choisissez Personnalisé. Pour définir une taille personnalisée, utilisez le curseur ou saisissez manuellement une nouvelle valeur rem. Cliquez sur Enregistrer pour appliquer vos modifications.
Astuce : pour savoir comment la version 7.1 utilise des rem pour les tailles de police, consultez l’article Modifier les polices de caractères.

Pour modifier la police de votre navigation, cliquez sur l’icône v située à côté du nom de l’ajustement pour ouvrir son menu déroulant. Vous pouvez alors modifier :

  • le nom des polices ;
  • Style
  • Taille
  • la hauteur de ligne ;
  • l’espacement entre les lettres.

Pour en savoir plus, consultez l’article Modifier les polices de caractères.

Modifier la couleur

La méthode pour modifier la couleur de votre navigation dépend de la version de votre site.

Pour modifier les couleurs des liens de navigation, changez le thème de couleurs de votre section d’en-tête. Vous pouvez également changer le thème de couleurs de la superposition de l’en-tête mobile.

Après avoir défini un thème de couleurs, vous pouvez personnaliser ce thème en appliquant des couleurs spécifiques aux liens de navigation.

Pour modifier les couleurs des liens de navigation, cliquez sur un ajustement de couleur dans le panneau Styles du site. Choisissez une nouvelle couleur en cliquant sur une couleur en haut du sélecteur, puis en sélectionnant une nuance dans le carré. Vous pouvez également saisir une valeur spécifique dans le champ de texte. Pour en savoir plus, consultez l’article Modifier les couleurs ou le guide du template de votre site.

Modifier la disposition et l’espacement

La méthode pour modifier la disposition de la navigation dépend de la version de votre site.

Pour modifier la position et l’espacement de vos liens de navigation, consultez l’article Modifier l’en-tête de votre site. Vous pouvez également personnaliser l’apparence et le placement de l’icône de menu sur les appareils mobiles.

Dans certains modèles, vous pouvez modifier la position des liens. Dans les styles de site, recherchez des réglages appelés Position de navigation, Alignement de navigation ou quelque chose de similaire. Pour connaître les positions disponibles dans votre modèle, consultez le tableau ci-dessous.

Conseil : certains templates prennent en charge la navigation fixe ou « sticky », qui reste dans la même position en haut du navigateur, lorsque vous faites défiler la page vers le bas.

Affichage de la navigation par template

La disposition de navigation de votre site dépend du template de votre site et s’affiche différemment sur les appareils mobiles. Les appareils mobiles plus grands, tels que les tablettes, peuvent afficher les mêmes styles que sur ordinateur.

Voici comment la navigation principale s'affiche sur les ordinateurs de ces familles de modèles :

Template

Disposition

Adirondack

Horizontale, centrée en haut

Avenue

Horizontale, gauche/centre/droite en haut

Aviator

Verticale, en haut à gauche (carte de visite/offset) ou horizontale, centrée en haut (affiche)

Bedford

Horizontale, en haut à droite

Brine

Horizontale, gauche/centre/droite en haut, peut être masquée. Dans le panneau Pages, il s’agit de la navigation principale.

Farro

Horizontale, gauche/centre/droite en haut, peut être masquée

Five

Verticale, dans une barre latérale (Position de navigation supérieure : aucune) ou horizontale, gauche/centre/droite en haut (au-dessus de la bannière, en dessous de la bannière)

Flatiron

Horizontale, en haut à gauche

Forte

Horizontale, en haut à droite

Galapagos

Horizontale, centrée en haut

Ishimoto

Horizontale, gauche/centre/droite en haut

Momentum

Horizontale, dans la barre de navigation

Montauk

Horizontale, gauche/centre/droite en haut

Native

Horizontale, centrée en haut

Pacific

Horizontale, centrée en haut, peut être répartie autour du titre du site

Skye

Verticale, dans une superposition

Supply

Verticale, barre latérale gauche

Tremont

Horizontale, en haut à gauche/droite

Wells

Verticale, barre latérale gauche

Wexley

Horizontale, gauche/centre/droite en haut

York

Horizontale, gauche/centre/droite en haut, peut être masquée

Modifier l’espacement des liens

Pour modifier l'espace autour des liens de navigation, recherchez les réglages dans les styles de site qui modifient votre en-tête, votre bannière ou votre navigation. Bien que les réglages varient selon le modèle, pour trouver comme régler l'espacement des liens recherchez des mots tels que marge intérieure, espacement ou largeur.

Les options Actif et Survol (version 7.0)

Sur la version 7.1, il n’est pas possible de définir des couleurs différentes pour l’effet de survol et les liens de navigation actifs. Les liens actifs sont toujours soulignés.

Certains templates proposent des options supplémentaires pour les liens de navigation, selon que l’on clique dessus ou non. C’est ce que l’on appelle parfois leur « état » ou leur « phase ». Les ajustements variant selon le template, recherchez les mots suivants :

  • Survol – Le lien change lorsque les visiteurs le survolent.
  • Actif – Lorsque les visiteurs consultent une page de votre navigation, le style de son lien change.

Si vous avez besoin d’aide, consultez le guide de votre template ou la liste des ajustements du panneau Styles du site.

Astuce : les liens de navigation externes n’afficheront pas les styles actifs, même s’ils renvoient vers une page de votre site.

Navigation mobile

Sur les appareils mobiles, les liens de navigation principale sont réduits derrière un lien de menu ou une icône ☰ (également appelée icône « hamburger »). Un visiteur peut cliquer ou appuyer dessus pour afficher le menu complet. Cela facilite l’utilisation de votre site et améliore son ergonomie sur mobile.

Le lien ou l’icône peut également apparaître sur les navigateurs d’ordinateur en fonction de la taille du navigateur de votre visiteur, du nombre de liens dans votre menu ou de la longueur de vos titres de navigation.

La méthode pour personnaliser le style de votre navigation mobile dépend de la version de votre site.

Pour personnaliser le style de votre navigation mobile, consultez l’article Modifier l’en-tête de votre site. Dans l’éditeur d’en-tête, cliquez sur l’icône Mobile pour définir des styles spécifiques aux appareils mobiles, notamment la disposition et le type d’icône de menu.

Important :

  • L’icône de menu apparaît toujours sur les appareils mobiles, même si toutes les pages se trouvent dans la section Hors navigation.
  • Il n’est pas possible de modifier la taille de la police de la navigation mobile.
  • Il n’est pas possible de faire apparaître systématiquement l’icône de menu sur un ordinateur.

Souvent, la navigation mobile hérite des styles de la version bureau afin que votre branding reste cohérent quel que soit le support. Certains templates proposent des options de styles mobiles avancés qui vous donnent plus de contrôle sur le design. Pour en savoir plus, consultez le guide de votre template.

Pour découvrir quels réglages affectent votre navigation mobile, ouvrez votre navigation en mode téléphone avant d'ouvrir les styles de site :

  1. Basculez la vue par appareil sur mobile.
  2. Cliquez sur le lien de navigation (généralement le symbole ☰) pour afficher votre navigation mobile.
  3. Dans le Menu principal, cliquez sur Design, puis sur Styles du site. La navigation mobile restera ouverte.
Astuce : si votre barre de navigation n’est pas visible sur la version de votre site pour mobile, vérifiez si la couleur d’arrière-plan ou d’en-tête n’est pas la même que celle du texte de votre barre de navigation. Il se peut que les liens s’affichent dans cette couleur dans la version pour mobile.

Design de l’icône ou du lien du menu par template

Voici comment l’icône ☰ ou le lien Menu s’affiche dans les familles de templates suivantes :

Famille de templates

Icône ou lien (s’affiche toujours sur mobile)

S’affiche sur ordinateur…

Adirondack

Icône ☰

  • Dans les navigateurs de petite taille (640 px)
  • Pour toujours afficher l’icône sur ordinateur, cochez Toujours afficher la navigation dans le panneau Styles du site.

Avenue

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

Aviator

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

Bedford

Icône ☰

  • Automatiquement lorsque les liens ne rentrent pas
  • Dans les navigateurs de petite taille (640 px)

Brine

Icône ☰. Modifiez le style à l'aide de la section icône de menu Mobile : dans les styles de site.

  • Dans les navigateurs à largeur réduite (640 px par défaut. Réglez le point d'arrêt Mobile pour en modifier la taille.)

Farro

Icône ☰

  • Dans les navigateurs de petite taille (640 px)

Five

Icône ☰

  • Dans les navigateurs de petite taille (640 px)

Flatiron

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

Forte

Icône ☰

  • Dans les navigateurs de petite taille (768 px)

Galapagos

Icône ☰

  • Dans les navigateurs de petite taille (724 px)

Ishimoto

Lien vers le menu

  • Dans les navigateurs de petite taille (800 px)

Momentum

Icône ☰

  • Dans les navigateurs de petite taille (736 px)

Montauk

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

Native

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

Pacific

Icône ☰

  • Dans les navigateurs de petite taille (768 px)
  • Pour que l'icône soit toujours affichée sur les ordinateurs, sélectionnez Toujours utiliser la navigation superposée dans les styles de site.

Skye

Icône ☰

  • S’affiche toujours

Supply

Icône ☰

  • Dans les navigateurs de petite taille (1024 px)

Tremont

Icône ☰

  • Dans les navigateurs de petite taille (640 px)
  • Automatiquement lorsque les liens ne rentrent pas
  • Pour que l'icône soit toujours affichée sur les ordinateurs, sélectionnez Style de navigation : icône dans les styles de site

Wells

Lien vers le menu

  • Dans les navigateurs de petite taille (800 px)

Wexley

Lien vers le menu

  • Dans les navigateurs de petite taille (640 px)

York

Icône ☰

  • Dans les navigateurs de petite taille (768 px)

Icônes de navigation mobile vides

Dans certains modèles, l'icône apparaît toujours sur mobile, même si toutes vos pages se trouvent dans la section Non liée.

Vous pouvez masquer l’icône du menu dans les familles de templates suivantes :

  • Famille Brine
  • Famille Farro

Accédez au Menu principal, cliquez sur Design, puis sur Styles de site. Faites défiler jusqu'à la section : Icône de menu Mobile : et réglez la position de l'icône Menu sur Masquer.

Dans les familles de templates suivantes, il n’existe pas de moyen intégré de masquer l’icône de navigation mobile :

  • Bedford
  • Forte
  • Galapagos
  • Montauk
  • Wells
  • York

Astuce : vous pouvez masquer l’icône de navigation mobile en ajoutant du code personnalisé. Pour en savoir plus, lisez ce billet sur Squarespace Forum.

Notez bien que les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes donc pas en mesure de vous aider ni pour la configuration de solutions basées sur du code, ni pour leur dépannage.

Masquer le menu réduit sur ordinateur

Pour empêcher l’affichage du lien ou de l’icône sur ordinateur :

  • Choisissez des titres de navigation courts.
  • Réduisez le nombre de liens dans le menu. Vous pouvez utiliser des dossiers pour regrouper des pages associées dans des menus déroulants ou, si votre site est sur la version 7.0, déplacer des pages vers une navigation secondaire ou en pied de page.
  • Si votre site utilise la version 7.0, changez de template. Cliquez sur l’onglet Version 7.0 ci-dessus, puis explorez les options S’affiche sur ordinateur….
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 79 sur 507
Mise en forme de votre navigation