Mise en forme de votre navigation

Personnalisez la police, la couleur et la taille des liens de navigation de votre site.

Dernière mise à jour le 16 février 2025

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 comportent 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
  • L'espacement entre les liens de 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 templates 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 template :

  • Pour ouvrir les styles de site, ouvrez le panneau Design, puis cliquez sur Styles du 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. Lorsque la zone de surlignage bleu apparaît, cliquez sur n’importe quel lien de navigation. Les ajustements qui n’affectent pas les liens de navigation sont alors masqués. Lorsque vous avez terminé, cliquez sur Tout afficher pour revenir à l’affichage principal.

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, ouvrez le panneau Styles du site, puis cliquez sur  >  à côté de Polices.
  2. 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.

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 processus de modification de la couleur de votre navigation dépend de la version utilisée par votre site et du style de l’en-tête.

Styles d’en-tête Plein et Dégradé Styles d’en-tête Thème et Dynamique
  1. Lorsque vous modifiez une page, ouvrez l’éditeur d’en-tête
  2. Dans l’éditeur d’en-tête, cliquez sur Style.
  3. Cliquez sur Couleur de la navigation pour modifier la couleur de vos liens de navigation et des icônes sociales intégrées.
  1. Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur > à côté de Couleurs.
  2. Cliquez sur l’icône du crayon du thème de couleur sélectionné pour l’en-tête de votre site.
  3. Modifiez l’ajustement des liens de navigation.
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez également cliquer sur Quitter, puis sur Enregistrer pour fermer l’éditeur.

Vous pouvez également changer le thème de couleurs de la superposition de l’en-tête mobile.

Pour modifier la couleur des liens de navigation, cliquez sur un ajustement de couleur dans le panneau Styles du site. Pour choisir une nouvelle couleur, cliquez sur la couleur en haut du sélecteur et sélectionnez 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 entre vos liens de navigation, modifiez la façon dont l’en-tête de votre site s’affiche sur les ordinateurs. Vous pouvez également personnaliser l’apparence et l’emplacement de l’icône du menu sur les appareils mobiles.

Dans certains templates, vous pouvez modifier la position des liens. Dans le panneau Styles du site, recherchez les ajustements intitulés Position de la navigation, Alignement de la navigation ou portant un nom similaire. Pour découvrir les positions disponibles dans votre template, consultez le tableau ci-dessous.

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 templates :

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 template, 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)

Accéder à cette fonctionnalité

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 (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.

Pour obtenir de l'aide sur votre template, consultez le guide de ce template.

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 :

  • Les boutons de l’en-tête apparaissent toujours avec les liens de navigation derrière le lien Menu ou l’icône ☰.
  • Il n’est pas possible de modifier la taille de la police de la navigation mobile.
  • Il est impossible de faire apparaître systématiquement l’icône de menu sur un ordinateur.
  • Pour supprimer l’icône de menu de votre en-tête, assurez-vous que toutes vos pages se trouvent dans la section Hors navigation et désactivez tous les éléments d’en-tête, à l’exception du panier. L’activation du panier ne fera pas apparaître l’icône du menu.

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 Site web, sur Design et sur Styles du site. La navigation mobile restera ouverte.

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 templates, l'icône apparaît toujours sur mobile, même si toutes vos pages se trouvent dans la section Hors navigation.

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

  • Famille Brine
  • Famille Farro

Ouvrez le panneau Design, puis cliquez sur Styles du site.Accédez à la section Mobile : Icône menu et définissez l’option Position de l’icône du 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

vous pouvez masquer l’icône de navigation mobile en ajoutant du code personnalisé. Pour en savoir plus, lisez cette publication 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 regrouper des pages associées dans des menus déroulants ou, si votre site utilise 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….
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.