Sticky Navbar

The navbar will stick to the top when you reach its scroll position.

content

Demo

Navbar style 1

The .dark class provides a dark navbar.

The navbar will be fixed to the top when scrolled.

<div id="adv-scrollspy-0" class="module adv-sticky-nav blue">
  <div class="adv-sticky-nav-body">
   <h2 class="navbar-site-name navbar-dark">
	  <a href="" class="navbar-brand">Site name</a>
   </h2>
   <nav class="navbar navbar-expand-md navbar-dark">
	  <div id="navbarNav" class="navbar-collapse">
	    <ul class="navbar-nav mr-auto navbar-lg">
		  <li class="nav-item">
			<a href="#menu01" class="nav-link text-white">Menu 01</a>
		  </li>
		  <li class="nav-item">
			<a href="#menu02" class="nav-link text-white">Menu 02</a>
		  </li>
		  <li class="nav-item">
			<a href="#menu03" class="nav-link text-white">Menu 03</a>
		  </li>
		  <li class="nav-item">
			<a href="#menu04" class="nav-link text-white">Menu 04</a>
		  </li>
		  <li class="nav-item">
			<a href="#menu05" class="nav-link text-white">Menu 05</a>
		  </li>
		</ul>
		<ul class="navbar-nav mr-auto navbar-sm">
		  <li class="nav-item">
			<select onchange="location = this.value;" class="form-control form-control-sm rounded-0">
			  <option value="#menu01">Menu 01</option>
			  <option value="#menu02">Menu 02</option>
			  <option value="#menu03">Menu 03</option>
			  <option value="#menu04">Menu 04</option>
			  <option value="#menu05">Menu 05</option>
			</select>	
		  </li>
		</ul>
	  </div>
	</nav>
  </div>
</div>

For mobile devices, a dropdown list will be displayed.

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/menu-bar.css">

JavaScript Instantiation

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/sticky-navbar.js"></script>

content