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.

Navbar style 2

The .light class provides a light navbar.

<div id="navbar-sticky" class="module adv-sticky-nav light">
  <div class="adv-sticky-nav-body mw-1200">
    <nav class="navbar navbar-expand-md">
      <div id="navbar" class="navbar-collapse">
        <ul class="navbar-nav mr-auto navbar-lg">
          <li class="nav-item"><a href="#menu01" class="nav-link">Menu 01</a></li>
          <li class="nav-item"><a href="#menu02" class="nav-link">Menu 02</a></li>
          <li class="nav-item"><a href="#menu03" class="nav-link">Menu 03</a></li>
          <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link">Menu 04<i class="fas fa-angle-down"></i></a>
            <div class="dropdown-content">
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link">Menu 05<i class="fas fa-angle-down"></i></a>
            <div class="dropdown-content">
              <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

Tabs with a more dropdown menu.


On mobile devices, the navigation bar will be displayed horizontally when fixed to the top, and users can swipe left or right to select the menu.

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