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.

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

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

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.

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.

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>