Navbar Top

Navbar Top is a different user friendly layout system in Falcon.

Navbar top example page
Supported Content

Falcon Navbar Top support all of Boostrap Navbar components. .navbar-brand, .navbar-nav, .navbar-toggler, .form-inline, .navbar-text, .collapse.navbar-collapse those sub-componets are used in Navbar Top.

Html
<nav class="navbar navbar-light navbar-glass navbar-top navbar-expand-lg">

  <!-- Navbar Content-->
</nav>
Responsive Behaviors

Falcon Navbar Top use Bootstrap Navbar responsive behaviors.

Navbar Top can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

Color Schemes

Changing the color of Navbar Top is very easy. Falcon uses .navbar-light for styling Navbar Top. You can use other Bootstrap utilitie classes to update the Navbar. Learn more about Bootstrap Navbar Color Schemes.

Navbar darken on scroll

Falcon's special Navbar for landing, where background color will be changed gradually transparent to darken on scroll.

See the implementation here
HTML

You can add darken on scroll feature to the Bootstrap navbar, just add data-navbar-darken-on-scroll attribute to the .navbar element. By default it will take the bg-dark color code to darken the navbar.

<nav class="navbar navbar-expand-lg navbar-dark" data-navbar-darken-on-scroll="data-navbar-darken-on-scroll">

  <!-- Navbar content -->
</nav>

You can also change the background color of the navbar by using any of the color from the list: primary, secondary, success, info, warning, danger, light, dark, black, 1100, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100, white like as follows: See all colors in Falcon

<nav class="navbar navbar-expand-lg navbar-dark" data-navbar-darken-on-scroll="primary">

  <!-- Navbar content -->
</nav>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta5

customize