Personnalisez la police, la couleur et la taille des liens de navigation de votre site.
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
- Incluez des liens dans votre navigation en ajoutant des pages dans le panneau Pages. Les pages de la section Hors navigation ne seront pas affichées.
- Pour modifier le texte d’un lien, mettez à jour son Titre de navigation dans les paramètres de la page.
- Pour modifier l’ordre des liens dans le menu, glissez-déposez les pages dans le panneau Pages.
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 :
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 :
- Pendant que vous modifiez une page, cliquez sur l’icône en forme de pinceau, puis cliquez sur Polices.
- Sous Styles de texte généraux, cliquez sur Attribuer des styles.
- Cliquez sur Navigation du site.
- 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.
- 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 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 |
|
|
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 doit s'afficher 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.
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 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)
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.
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 :
- 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 :
- Basculez la vue par appareil sur mobile.
- Cliquez sur le lien de navigation (généralement le symbole ☰) pour afficher votre navigation mobile.
- Dans le Menu principal, cliquez sur Site web, sur Design et 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 ☰ |
|
Avenue |
Lien vers le menu |
|
Aviator |
Lien vers le menu |
|
Bedford |
Icône ☰ |
|
Brine |
Icône ☰. Modifiez le style à l'aide de la section icône de menu Mobile : dans les styles de site. |
|
Farro |
Icône ☰ |
|
Five |
Icône ☰ |
|
Flatiron |
Lien vers le menu |
|
Forte |
Icône ☰ |
|
Galapagos |
Icône ☰ |
|
Ishimoto |
Lien vers le menu |
|
Momentum |
Icône ☰ |
|
Montauk |
Lien vers le menu |
|
Native |
Lien vers le menu |
|
Pacific |
Icône ☰ |
|
Skye |
Icône ☰ |
|
Supply |
Icône ☰ |
|
Tremont |
Icône ☰ |
|
Wells |
Lien vers le menu |
|
Wexley |
Lien vers le menu |
|
York |
Icône ☰ |
|
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 Non liée.
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
Astuce : 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 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….