Combo Nav
Combo Nav is an additional layout system of Falcon where you can place both Navbar Top and Navbar Vertical in a same page.
Combo Nav Example PageHtml
Convert any page to Combo Nav layout easily by using Falcon's Navbar Vertical and Navbar Top . The structure of combo nav layout will like this:
<main class="main">
<div class="container" data-layout="container">
<!-- Set .navbar-top-combo class to the navbar top element as describe in step 1 in the responsive behaviours section-->
<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-top-combo">
<div class="collapse navbar-collapse">
<div class="navbar-vertical-content scrollbar perfect-scrollbar">
<!-- Your navbar vertical content-->
<!-- Set a unique ID to the navbar vertical element as describe in step 2 in the responsive behaviours section -->
<div class="navbar-nav" id="yourUniqueID">
<!-- Nav elements-->
</div>
</div>
</div>
</nav>
<div class="content">
<!-- Set the unique ID to data-move-target attribute which you added in step 2 as describe in step 3 in the responsive behaviours section -->
<nav class="navbar navbar-expand-lg navbar-light navbar-glass sticky-kit navbar-top navbar-top-combo" data-move-target="#yourUniqueID">
<!-- Your navbar top content here-->
</nav>
<!-- Your page content wil go here-->
</div>
</div>
</main>