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 |
2022 © Themewagon

v3.9.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize