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.

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.

If this is a normal bootstrap navbar that spreads only on one line, it should be 40px.

Done !