375 lines
26 KiB
HTML
Executable File
375 lines
26 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html class="loading" lang="en" data-textdirection="ltr">
|
|
<!-- BEGIN: Head-->
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<meta name="description" content="Vuesax admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
|
|
<meta name="keywords" content="admin template, Vuesax admin template, dashboard template, flat admin template, responsive admin template, web app">
|
|
<meta name="author" content="PIXINVENT">
|
|
<title>Fixed Navbar - Vuesax - Bootstrap HTML admin template</title>
|
|
<link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
|
|
<link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.ico">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
|
|
|
|
<!-- BEGIN: Vendor CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/ui/prism.min.css">
|
|
<!-- END: Vendor CSS-->
|
|
|
|
<!-- BEGIN: Theme CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">
|
|
|
|
<!-- BEGIN: Page CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
|
|
<!-- END: Page CSS-->
|
|
|
|
<!-- BEGIN: Custom CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
|
|
<!-- END: Custom CSS-->
|
|
|
|
</head>
|
|
<!-- END: Head-->
|
|
|
|
<!-- BEGIN: Body-->
|
|
|
|
<body class="vertical-layout vertical-menu-modern 2-columns navbar-sticky footer-static " data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">
|
|
|
|
<!-- BEGIN: Main Menu-->
|
|
<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
|
|
<div class="navbar-header">
|
|
<ul class="nav navbar-nav flex-row">
|
|
<li class="nav-item mr-auto"><a class="navbar-brand" href="../../../html/ltr/vertical-menu-template/index.html">
|
|
<div class="brand-logo"></div>
|
|
<h2 class="brand-text mb-0">Vuesax</h2>
|
|
</a></li>
|
|
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block primary" data-ticon="icon-disc"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="shadow-bottom"></div>
|
|
<div class="main-menu-content">
|
|
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
|
|
<li class=" nav-item"><a href="../../../html/ltr/vertical-menu-template/index.html"><i class="feather icon-home"></i><span class="menu-title" data-i18n="">Dashboard</span><span class="badge badge badge-warning badge-pill float-right">2</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-zap"></i><span class="menu-title" data-i18n="">Starter kit</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="sk-layout-1-column.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.1_column">1 column</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-2-columns.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.2_columns">2 columns</span></a>
|
|
</li>
|
|
<li class="active"><a href="sk-layout-fixed-navbar.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_navbar">Fixed navbar</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-floating-navbar.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_navigation">Floating navbar</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-fixed.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_layout">Fixed layout</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-static.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.static_layout">Static layout</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="changelog.html"><i class="feather icon-file"></i><span class="menu-title" data-i18n="">Changelog</span><span class="badge badge badge-pill badge-danger float-right">1.0</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.ticksy.com/"><i class="feather icon-life-buoy"></i><span class="menu-title" data-i18n="">Raise Support</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.com/demo/vuesax-html-admin-dashboard-template/documentation"><i class="feather icon-folder"></i><span class="menu-title" data-i18n="">Documentation</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- END: Main Menu-->
|
|
|
|
<!-- BEGIN: Content-->
|
|
<div class="app-content content">
|
|
|
|
<!-- BEGIN: Header-->
|
|
<div class="content-overlay"></div>
|
|
<div class="header-navbar-shadow"></div>
|
|
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu fixed-top navbar-light navbar-shadow">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-container content">
|
|
<div class="navbar-collapse" id="navbar-mobile">
|
|
<div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item mobile-menu d-xl-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ficon feather icon-menu"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav bookmark-icons">
|
|
<!-- li.nav-item.mobile-menu.d-xl-none.mr-auto-->
|
|
<!-- a.nav-link.nav-menu-main.menu-toggle.hidden-xs(href='#')-->
|
|
<!-- i.ficon.feather.icon-menu-->
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-1-column.html" data-toggle="tooltip" data-placement="top" title="1-Column"><i class="ficon feather icon-file-text"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-2-columns.html" data-toggle="tooltip" data-placement="top" title="2-Columns"><i class="ficon feather icon-sidebar"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-static.html" data-toggle="tooltip" data-placement="top" title="Static Layout"><i class="ficon feather icon-sliders"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link bookmark-star"><i class="ficon feather icon-star warning"></i></a>
|
|
<div class="bookmark-input search-input">
|
|
<div class="bookmark-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="form-control input" type="text" placeholder="Explore Vuesax..." tabindex="0" data-search="starter-list" />
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
<!-- select.bookmark-select-->
|
|
<!-- option 1-Column-->
|
|
<!-- option 2-Column-->
|
|
<!-- option Static Layout-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<ul class="nav navbar-nav float-right">
|
|
<li class="dropdown dropdown-language nav-item"><a class="dropdown-toggle nav-link" id="dropdown-flag" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="flag-icon flag-icon-us"></i><span class="selected-language">English</span></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown-flag"><a class="dropdown-item" href="#" data-language="en"><i class="flag-icon flag-icon-us"></i> English</a><a class="dropdown-item" href="#" data-language="fr"><i class="flag-icon flag-icon-fr"></i> French</a><a class="dropdown-item" href="#" data-language="de"><i class="flag-icon flag-icon-de"></i> German</a><a class="dropdown-item" href="#" data-language="pt"><i class="flag-icon flag-icon-pt"></i> Portuguese</a></div>
|
|
</li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link nav-link-expand"><i class="ficon feather icon-maximize"></i></a></li>
|
|
<li class="nav-item nav-search"><a class="nav-link nav-link-search"><i class="ficon feather icon-search"></i></a>
|
|
<div class="search-input">
|
|
<div class="search-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="input" type="text" placeholder="Explore Vuesax..." tabindex="-1" data-search="starter-list" />
|
|
<div class="search-input-close"><i class="feather icon-x"></i></div>
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#" data-toggle="dropdown"><i class="ficon feather icon-bell"></i><span class="badge badge-pill badge-primary badge-up">5</span></a>
|
|
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
|
|
<li class="dropdown-menu-header">
|
|
<div class="dropdown-header m-0 p-2">
|
|
<h3 class="white">5 New</h3><span class="grey darken-2">App Notifications</span>
|
|
</div>
|
|
</li>
|
|
<li class="scrollable-container media-list">
|
|
<!-- a(href='javascript:void(0)').d-flex.justify-content-between-->
|
|
<!-- .d-flex.align-items-start-->
|
|
<!-- i.feather.icon-plus-square-->
|
|
<!-- .mx-1-->
|
|
<!-- .font-medium.block.notification-title New Message-->
|
|
<!-- small Are your going to meet me tonight?-->
|
|
<!-- small 62 Days ago--><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-plus-square font-medium-5 primary"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="primary media-heading">You have new order!</h6><small class="notification-text"> Are your going to meet me tonight?</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">9 hours ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-download-cloud font-medium-5 success"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="success media-heading red darken-1">99% Server load</h6><small class="notification-text">You got new order of goods.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">5 hour ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-alert-triangle font-medium-5 danger"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="danger media-heading yellow darken-3">Warning notifixation</h6><small class="notification-text">Server have 99% CPU usage.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-check-circle font-medium-5 info"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="info media-heading">Complete the task</h6><small class="notification-text">Cake sesame snaps cupcake</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last week</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-file font-medium-5 warning"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="warning media-heading">Generate monthly report</h6><small class="notification-text">Chocolate cake oat cake tiramisu marzipan</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last month</time></small>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-menu-footer"><a class="dropdown-item p-1 text-center" href="javascript:void(0)">Read all notifications</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown">
|
|
<div class="user-nav d-sm-flex d-none"><span class="user-name text-bold-600">John Doe</span><span class="user-status">Available</span></div><span><img class="round" src="../../../app-assets/images/portrait/small/avatar-s-11.png" alt="avatar" height="40" width="40" /></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i class="feather icon-user"></i> Edit Profile</a><a class="dropdown-item" href="#"><i class="feather icon-mail"></i> My Inbox</a><a class="dropdown-item" href="#"><i class="feather icon-check-square"></i> Task</a><a class="dropdown-item" href="#"><i class="feather icon-message-square"></i> Chats</a>
|
|
<div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="feather icon-power"></i> Logout</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END: Header-->
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content-header row">
|
|
<div class="content-header-left col-md-9 col-12 mb-2">
|
|
<div class="row breadcrumbs-top">
|
|
<div class="col-12">
|
|
<h2 class="content-header-title float-left mb-0">Fixed Navbar</h2>
|
|
<div class="breadcrumb-wrapper col-12">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a href="#">Starter Kit</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Fixed Navbar
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
|
|
<div class="form-group breadcrum-right">
|
|
<div class="dropdown">
|
|
<button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-settings"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Chat</a><a class="dropdown-item" href="#">Email</a><a class="dropdown-item" href="#">Calendar</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-body">
|
|
<!-- Description -->
|
|
<section id="description" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Description</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>The fixed navbar layout has a fixed navbar and navigation menu and footer. Only navbar section is fixed to user. In this page you can experience it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ Description -->
|
|
<!-- CSS Classes -->
|
|
<section id="css-classes" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">CSS Classes</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>This table contains all classes related to the fixed navbar layout. This is a custom layout classes for fixed navbar layout page requirements.</p>
|
|
<p>All these options can be set via following classes:</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Classes</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row"><code>.navbar-sticky</code></th>
|
|
<td>To set navbar fixed you need to add <code>navbar-sticky</code> class in <code><body></code> tag.</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><code>.fixed-top</code></th>
|
|
<td>To set navbar fixed you need to add <code>fixed-top</code> class in <code><nav></code> tag.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ CSS Classes -->
|
|
<!-- HTML Markup -->
|
|
<section id="html-markup" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">HTML Markup</h4>
|
|
</div>
|
|
<div class="card-content collapse show">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>This section contains HTML Markup to create fixed navbar layout. This markup define where to add css classes to make navbar fixed. Navbar Menu has not spacing between navigation menu and navbar menu.</p>
|
|
<p>Vuesax has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the <code>vuesax-html-admin-dashboard-template/starter-kit</code> folder.</p>
|
|
<pre class="language-html">
|
|
<code class="language-html">
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head></head>
|
|
<body data-menu="vertical-menu-modern" class="vertical-layout vertical-menu-modern 2-column navbar-sticky menu-expanded">
|
|
|
|
<!-- fixed-top-->
|
|
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu fixed-top 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="content app-content">
|
|
.....
|
|
</div>
|
|
<!-- END Content-->
|
|
|
|
<!-- START FOOTER LIGHT-->
|
|
<footer class="footer footer-static footer-light">
|
|
...
|
|
</footer>
|
|
<!-- START FOOTER LIGHT-->
|
|
|
|
</body>
|
|
</html>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ HTML Markup -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Content-->
|
|
|
|
<div class="sidenav-overlay"></div>
|
|
<div class="drag-target"></div>
|
|
|
|
<!-- BEGIN: Footer-->
|
|
<footer class="footer footer-static footer-light">
|
|
<p class="clearfix blue-grey lighten-2 mb-0"><span class="float-md-left d-block d-md-inline-block mt-25">COPYRIGHT © 2019<a class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent" target="_blank">Pixinvent,</a>All rights Reserved</span><span class="float-md-right d-none d-md-block">Hand-crafted & Made with<i class="feather icon-heart pink"></i></span>
|
|
<button class="btn btn-primary btn-icon scroll-top" type="button"><i class="feather icon-arrow-up"></i></button>
|
|
</p>
|
|
</footer>
|
|
<!-- END: Footer-->
|
|
|
|
|
|
<!-- BEGIN: Vendor JS-->
|
|
<script src="../../../app-assets/vendors/js/vendors.min.js"></script>
|
|
<script src="../../../app-assets/vendors/js/forms/select/select2.full.min.js"></script>
|
|
<!-- BEGIN Vendor JS-->
|
|
|
|
<!-- BEGIN: Page Vendor JS-->
|
|
<script src="../../../app-assets/vendors/js/ui/prism.min.js"></script>
|
|
<!-- END: Page Vendor JS-->
|
|
|
|
<!-- BEGIN: Theme JS-->
|
|
<script src="../../../app-assets/js/core/app-menu.js"></script>
|
|
<script src="../../../app-assets/js/core/app.js"></script>
|
|
<!-- END: Theme JS-->
|
|
|
|
<!-- BEGIN: Page JS-->
|
|
<!-- END: Page JS-->
|
|
|
|
</body>
|
|
<!-- END: Body-->
|
|
|
|
</html> |