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

Your site's navigation is a set of links that directs visitors to your site content. Navigation typically displays at the top of your site, although some version 7.0 templates support navigation in footers or sidebars.

All sites include options for changing the font, color, and size of your navigation's links. This guide explains how to customize your navigation on any site.

Avant de commencer

Find the navigation style tweaks

The way that you change your navigation style depends on your site's version.

Navigation link styles are primarily set by your site's header. In the header editor, you can change:

  • The navigation layout
  • The navigation colors
  • The padding around text
  • Whether the navigation is fixed
  • L’aspect de la navigation sur ordinateur ou appareils mobiles

You can also use options in the Design panel to change fonts and sizes. To learn more, see the sections below.

Every template family has its own Site Styles, so there isn't one single rule for how to update your navigation links. Use these tips to find the style options your template supports:

  • To open Site Styles from the Home Menu, click Design, then Site Styles.
  • Scroll through the tweaks on the left and look for related tweaks. The tweaks usually include the word Navigation.
  • You can also hover over your site's navigation in the site preview on the right. When a blue highlighter box appears around it, click any navigation link. This helps filter out tweaks that don't affect the navigation links. When you're done, click Show All to go back to the main view.

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

The way that you change your navigation font depends on your site's version

By default, your navigation font matches your site-wide font. To set a different font type or size for your navigation:

  1. Dans le Menu principal, cliquez sur Design, puis sur Polices.
  2. Sous Styles de texte généraux, cliquez sur Attribuer des styles.
  3. Click Site Navigation.
  4. To change the font, click Style, then choose Custom. Choose a new font family, weight, style, and other details. Click Save to apply your changes. 
  5. To change the size, click Size, then choose a preset Paragraph size, or choose Custom. To set a custom size, use the slider or manually enter a new rem value. Click Save to apply your changes.
Tip: To learn how version 7.1 uses rem values for font sizes, visit Changing fonts

To change your navigation font, click the v icon next to the tweak name to open its drop-down menu. From here, you can change:

  • 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

The way you change your navigation color depends on your site's version.

Pour modifier les couleurs des liens de navigation, modifiez le thème de couleurs de votre section d’en-tête. Vous pouvez également modifier 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.

To change the navigation link colors, click a color tweak in Site Styles. Choose a new color by clicking a color at the top of the selector, then selecting a shade within the square. You can also enter a specific value in the text field. For more help, visit Changing colors or your site's template guide.

Change the layout and spacing

The way you change the navigation layout depends on your site's version.

To change the position and spacing of your navigation links, edit your site's header. You can also customize the look and placement of the menu icon on mobile devices.  

In some templates, you can change the position of the links. In Site Styles, look for tweaks called Navigation Position, Navigation Alignment, or something similar. To see what positions are available in your template, see the table below.

Tip: Some templates support fixed, or "sticky" navigation, that stays in the same position at the top of the browser while you scroll down the page.

Navigation display by template

Your site's navigation layout depends on your site's template, and displays differently on mobile devices. Larger mobile devices, such as tablets, may display the computer styles. 

Here's how the Main Navigation displays on computers in these template families:

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

Horizontal, top left/center/right, can be hidden. In the Pages Panel, it's called the Primary Navigation.

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

Horizontal, top center, can be split around the site title

Skye

Verticale, dans une superposition

Supply

Verticale, barre latérale gauche

Tremont

Horizontal, top left/right

Wells

Verticale, barre latérale gauche

Wexley

Horizontale, gauche/centre/droite en haut

York

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

Change link spacing

To change the space around navigation links, look for tweaks in Site Styles that change your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like Padding, Spacing, or Width.

Active and hover options (version 7.0)

On version 7.1, it's not possible to set different colors for hover and active navigation links. Active links are always underlined. 

In some templates, there are additional options for navigation links depending on if they've been clicked. This is sometimes called their "state" or "phase." While the tweaks vary by template, look for these words:

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

For help with your template, visit its template guide or list of Site Styles tweaks.

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

On mobile devices, Main Navigation links collapse behind a Menu link or ☰ icon (also known as a "hamburger" icon). A visitor can click or tap it to reveal the full menu. This helps with usability and keeps your site mobile-friendly. 

The link or icon can also appear on computer browsers depending on your visitor's browser size, the number of links in your menu, or the length of your navigation titles. 

The way that you style your mobile navigation depends on your site's version.

To style your mobile navigation, edit your site's header. In the header editor, click the Mobile icon to set mobile-specific styles, including the layout and type of menu icon. 

À retenir : 

  • L'icône de menu apparaît toujours sur mobile, même si toutes les pages se trouvent dans la section Hors navigation.
  • It's not possible to make the the menu icon always appear on a computer. 

In many cases, mobile navigation inherits styles from the computer display to keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To learn more, visit your template's guide.

To explore which tweaks affect your mobile navigation, open your navigation in phone view before opening Site Styles:

  1. Switch the Device View to phone.
  2. Click the navigation link (usually a ☰) so your mobile navigation appears.
  3. Dans le Menu principal, cliquez sur Design, puis sur Styles du site. La navigation mobile restera ouverte.
Tip: If you can’t see your navigation on mobile, ensure that you haven’t set your background or header color to the same color as your navigation text. The links may display over this color on mobile.

Menu icon or link design by template

Here's how the ☰ icon or Menu link displays in these template families:

Famille de templates

Icon or link (Always shows on mobile)

Shows on computers...

Adirondack

☰ icon

  • In narrow browsers (640 px)
  • Pour toujours afficher l’icône sur ordinateur, cochez Toujours afficher la navigation dans le panneau Styles du site.

Avenue

Menu link

  • In narrow browsers (640 px)

Aviator

Menu link

  • In narrow browsers (640 px)

Bedford

☰ icon

  • Automatically when links won't fit
  • In narrow browsers (640 px)

Brine

☰ icon. Change the style with the Mobile: Menu Icon section in Site Styles.

  • In narrow browsers (640 px by default. Change this with the Mobile Breakpoint tweak.)

Farro

☰ icon

  • In narrow browsers (640 px)

Five

☰ icon

  • In narrow browsers (640 px)

Flatiron

Menu link

  • In narrow browsers (640 px)

Forte

☰ icon

  • In narrow browsers (768 px)

Galapagos

☰ icon

  • In narrow browsers (724 px)

Ishimoto

Menu link

  • In narrow browsers (800 px)

Momentum

☰ icon

  • In narrow browsers (736 px)

Montauk

Menu link

  • In narrow browsers (640 px)

Native

Menu link

  • In narrow browsers (640 px)

Pacific

☰ icon

  • In narrow browsers (768 px)
  • To always show the icon on computers, select Always Use Overlay Nav in Site Styles.

Skye

☰ icon

  • Always displays

Supply

☰ icon

  • In narrow browsers (1024 px)

Tremont

☰ icon

  • In narrow browsers (640 px)
  • Automatically when links won't fit
  • To always show the icon on computers, select Nav Style: Icon in Site Styles

Wells

Menu link

  • In narrow browsers (800 px)

Wexley

Menu link

  • In narrow browsers (640 px)

York

☰ icon

  • In narrow browsers (768 px) 

Empty mobile navigation icons

In some templates, the icon always appears on mobile, even if all your pages are in the Not Linked section.

You can hide the menu icon in these template families:

  • Famille Brine
  • Famille Farro

Go to the Home Menu, click Design, then click Site Styles. Scroll to the Mobile: Menu Icon section and set the Menu Icon Position tweak to Hide.

In these template families, there isn't a built-in way to hide the mobile navigation icon:

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

Tip: You can hide the mobile navigation icon with a code-based solution. For more information, view this post in the 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.

Hide the collapsed menu on computers

To prevent the link or icon from showing on computers:

  • Keep navigation titles short.
  • Reduce the number of links in the menu. You can use folders to group related pages into drop-down menus, or, if your site is on version 7.0, move pages to Secondary or Footer Navigation.
  • If your site is on version 7.0, switch to a different template. Click the Version 7.0 tab above, then explore the Shows on computers… options. 
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 68 sur 418
Mise en forme de votre navigation