Plan du cours
Dans cette seconde partie nous allons voir comment améliorer un peu notre barre de navigation (navbar).
Barre de navigation avec formulaire de recherche
Pour créer un formulaire de recherche dans la barre de navigation nous allons tout simplement y rajouter un élément <form> et nous servir de la classe .form-inline pour regrouper côte à côte la barre de recherche et le bouton correspondant.
*les classes : .form-control et .mr-sm-2 sont là pour styliser notre formulaire mais ce n’est pas le sujet de cette leçon.
Barre de navigation avec du texte
Ici nous allons rajouter du texte en plus des liens du menu.
Nous utiliserons la classe .navbar-text pour aligner correctement le texte (même marge intérieure que les liens du menu) dans la barre de navigation.
Barre de navigation fixe
Cette barre de navigation va rester apparente même lorsqu’on descendra à l’intérieur de la page.
Classe: .fixed-top
Très important : vous devrez rajouter à l’élément se situant juste en-dessous de votre barre de navigation une marge haute ( margin-top) pour éviter que l’élément et le menu ne se chevauchent.
*Notez que vous pouvez aussi fixer la barre en bas de la page en remplaçant la classe : .fixed-top par la classe : .fixed-bottom.
Barre de navigation épinglée (sticky)
Pour finir, voyons cette barre un peu spéciale qui ne va rester collée (fixée) en haut de la page qu’une fois que le scroll de la souris sera passé à sa hauteur.
Classe: .sticky-top
