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 data-navbar-top="combo" attribute 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">
      <div class="collapse navbar-collapse">
        <div class="navbar-vertical-content 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 navbar-top" data-move-target="#yourUniqueID" data-navbar-top="combo">

        <!-- Your navbar top content here-->
      </nav>

      <!-- Your page content wil go here-->
    </div>
  </div>
</main>

Falcon get the breakpoint from the navbar-expand{-sm|-md|-lg|-xl|-xxl} class of navbar top and move the content to the navbar vertical if screen size is below the breakpoint.

To make the combo nav responsive follow the steps below:

1. Add data-navbar-top="combo" attribute to the .navbar-top element.
2. Add a unique id to the any of navbar vertical element after where you want to put your navbar top content on responsive.
3. Add data-move-target attribute with the id (set in step 2) to the data-navbar-top="combo" element to move the navbar collapse content to the navbar vertical.