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 Page

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

      <!-- Your page content wil go here-->
Responsive behaviors#

Falcon get the breakpoint from the navbar-expand{-sm|-md|-lg|-xl} 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 .navbar-top-combo class 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) including # to the .navbar-top-combo to move the navbar collapse content to the navbar vertical.

Thank you for creating with Falcon |
2021 © Themewagon