Mise en forme de votre navigation

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 le panneau Styles du site à partir du Menu principal, cliquez sur Design, puis 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 :

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.

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

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 :

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.

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.
• L'icône du menu n'apparaîtra pas si toutes vos pages se trouvent dans la section Non liée. Si l'icône du menu apparaît toujours, même sans pages dans votre navigation, désactivez la connexion aux comptes clients dans votre en-tête.

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 :

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

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