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
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).
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>
Maintenant lorsqu’on fait défiler la page, le menu reste visible.
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.
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.
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 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.
