Headers
Headers are compositions that extend standard navbar functionalities. They contain additional components like a jumbotron, sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.
Background image
Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.
To provide a proper contrast it's highly recommended to use a mask. You can change the color and the opacity of the mask by manipulating RGBA code.
You also must set the height of the background image, otherwise, the component will collapse. In the
example below, we set the height to 400px.
We use flexbox utilities to center the content vertically and horizontally.
Fixed navbar
You can stick the navbar to the top of the window by using .fixed-top class. Thanks to this
whenever you
scroll the page the navbar will be always visible.
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM
and may require
custom CSS (e.g., padding-top on the <body>) to prevent overlap with
other elements. In the examples below, we add margin-top: 58px; (height of
the navbar) to the jumbotron and background image for this purpose.