Bootstrap 5 : Comment fixer une barre de navigation ?

Bootstrap 5 : Comment fixer une barre de navigation ?

Nous allons voir dans cette leçon les différentes manières de fixer une barre de navigation avec Bootstrap 5.

Nous verrons 3 nouvelles classes :

  • fixed-top
  • sticky-top
  • fixed-bottom
Table des matieres

Pour commencer, créons une barre de navigation avec une couleur de fond sombre et un texte clair.

Rajoutons une hauteur de 1500px à la balise body, pour voir comment réagit la barre de navigation lorsqu’on fait défiler la page vers le bas (scroll).

<body style=”height:1500px”>

Et enfin, plaçons un petit paragraphe sous le Header (entête).

Bootstrap 5 : Comment fixer une barre de navigation ?
Bootstrap 5 : Comment fixer une barre de navigation ?

Si vous faites défiler la page vers le bas, vous verrez que la barre de navigation disparaît.

Fixer une barre de navigation en haut de page avec Bootstrap 5

La classe : fixed-top

La classe fixed-top va nous permettre de fixer la barre de navigation en haut de la page et faire en sorte qu’elle reste visible lorsqu’on fait défiler cette dernière vers le bas.

La classe fixed-top doit être ajoutée à la balise <nav>

Bootstrap 5 Comment fixer une barre de navigation avec fixed-top

Maintenant lorsqu’on fait défiler la page, le menu reste visible.

Bootstrap 5 Comment fixer une barre de navigation avec fixed-top

La classe : sticky-top

La classe sticky-top bien qu’assez semblable à la classe fixed-top, n’en demeure pas moins différente.

En effet, la classe sticky-top va venir placer la barre de navigation en haut de page seulement lorsqu’elle aura été dépassée par le défilement de la page vers le bas.

Ce n’est pas très clair ? Bien, prenons un exemple pour mieux comprendre.

Imaginons que notre barre de navigation ne soit pas placée en haut de page, mais en dessous d’un élément. Cet élément peut être une bannière, du texte, un titre, etc.

Bootstrap 5 Comment fixer une barre de navigation avec sticky-top
fixer une barre de navigation avec sticky-top

Maintenant, nous voulons faire en sorte que lorsqu’on fait défiler la page vers le bas, la barre de navigation reste visible en haut de la page, mais pas l’élément au-dessus d’elle (dans notre exemple, l’élément est un paragraphe).

Nous ne pouvons pas utiliser la classe fixed-top car cette dernière va venir fixer la barre en haut de la page et l’élément censé être au-dessus de la barre de navigation va se retrouver en dessous d’elle.

Regardez.

fixer une barre de navigation avec sticky-top

Ce n’est pas du tout ce que l’on souhaite.

Pour remédier à ce problème nous devons remplacer la classe fixed-top par la classe sticky-top dans la balise <nav>

fixer une barre de navigation avec sticky-top
fixer une barre de navigation avec sticky-top

Fixer une barre de navigation en bas de page avec Bootstrap 5

La classe : fixed-bottom

Dans certains cas, on peut vouloir fixer une barre de navigation en bas de page en l’occurrence un footer (pied de page) et faire en sorte qu’il soit toujours visible, peu importe qu’on fasse défiler la page vers le haut ou vers le bas.

Pour ce faire nous allons utiliser la classe fixed-bottom.

Créons un footer à la manière du header, avec une barre de navigation et la classe fix-bottom pour voir ce que ça donne.

Bootstrap 5 Comment fixer une barre de navigation avec fixed-bottom
Bootstrap 5 Comment fixer une barre de navigation avec fixed-bottom
Bootstrap 5 Comment fixer une barre de navigation avec fixed-bottom
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0