Navbar Double Top
Navbar Double Top is a different user friendly layout system in Falcon.
Navbar double top example pageSupported 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 hereHTML
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>