Strap Template - Fixed-top navbar
Table of Contents
1 - About
A fixed-top navbar is a navigation bar that stays located at the top of the page.
2 - Articles Related
Fixed-top bar styling
A fixed-top navigation bar gives a great experience but is difficult to implement because they needs some extra styling in order to relocate:
- the top location of the page
- the location of the heading
Without this changements, a navigation via a link to an heading would land below the fixed-top navbar and will then cache the heading.
ComboStrap is fixed-top bar ready and permits to implement it with a couple of parameters. See the below steps
3 - How to configure a fixed-top navbar ?
3.1 - Create a fixed-top navbar
Create a navbar with the option position=“top”
Minimal Example:
<navbar position="top">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
ComboStrap (Beta)
</brand>
</navbar>
For a complete and detailed instruction, see ComboStrap Getting Started - Creation of a top bar
3.2 - Set the height of the navbar
The heightFixedTopNavbar strap configuration permits to change automatically all style in order to move the top location of the page.
You need to set the height of your navbar.
Done !