The floating navigation layout has a fixed navigation and floating navbar menu and footer. Only navigation section and navbar menu is fixed to user. Navbar Wrapper has specing from all sides. In this page you can experience it.

CSS Classes

This table contains all classes related to the floating navigation layout. This is a custom layout classes for fixed navigation layout page requirements.

All these options can be set via following classes:

Classes Description
.navbar-floating To set floating navbar you need to add navbar-floating class in <body> tag.
.floating-nav To set floating navbar you need to add floating-nav class in <nav> tag.

HTML Markup

This section contains HTML Markup to create floating navigation layout. This markup define where to add css classes to make navigation floating.

Vuesax has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the vuesax-html-admin-dashboard-template/starter-kit folder.

            <!DOCTYPE html>
              <html lang="en">
                <body data-menu="vertical-menu-modern" class="vertical-layout vertical-menu-modern 2-column navbar-floating menu-expanded">

                  <!-- fixed-top-->
                  <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">

                  <!-- BEGIN Navigation-->
                  <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded">
                  <!-- END Navigation-->

                  <!-- BEGIN Content-->
                  <div class="content app-content">
                  <!-- END Content-->

                  <!-- START FOOTER LIGHT-->
                  <footer class="footer footer-static footer-light">
                  <!-- START FOOTER LIGHT-->