Description
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.
VueAdmin has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the VueAdmin-html-bootstrap-admin-template/starter-kit folder.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body data-menu="vertical-menu-modern" class="vertical-layout vertical-menu-modern 2-column navbar-floating footer-static menu-expanded">
<!-- fixed-top-->
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">
</nav>
<!-- BEGIN Navigation-->
<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded">
</div>
<!-- END Navigation-->
<!-- BEGIN Content-->
<div class="app-content content">
<div class="content-wrapper">
</div>
</div>
<!-- END Content-->
<!-- START FOOTER LIGHT-->
<footer class="footer footer-static footer-light">
</footer>
<!-- END FOOTER LIGHT-->
</body>
</html>