### Navbar Double Top

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

Navbar double top example page

##### Supported Content

Falcon Navbar Double 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 Double Top.

##### Html

    <nav class="navbar navbar-light navbar-glass navbar-top">
      <div>

        <!-- Navbar Content-->
      </div>
      <hr class="my-2 d-none d-lg-block" />
      <div class="collapse navbar-collapse" id="triggerID">

        <!-- Collapsible content-->
      </div>
    </nav>

##### Responsive Behaviors

Falcon Navbar Double Top use Bootstrap Navbar responsive behaviors.

Navbar Double 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 Double Top is very easy. Falcon uses `.navbar-light` for styling Navbar Double 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`, `1100`, `1000`, `900`, `800`, `700`, `600`, `500`, `400`, `300`, `200`, `100` 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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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