Css styles:
.yamm
.ct-headroom–scrollUpMenu
.ct-headroom–scrollUpTopBar
.ct-headroom–scrollUpBoth
.ct-headroom–fixedTopBar
.ct-headroom–fixedMenu
.ct-headroom–fixedBoth
.ct-headroom–hideMenu
Screenshot:
Navigation
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<nav class="navbar yamm text-uppercase"> <div class="container"> <div class="navbar-header"><a href="index.html"><img src="assets/images/demo-content/logo.png" alt="logo"></a></div> <ul class="nav navbar-nav ct-navbar--fadeInUp pull-right"> <li class="dropdown"><a href="index.html">home</a> <ul class="dropdown-menu"> <li><a href="adventure.html">Adventure</a><a href="adventure2.html">Adventure - next</a><a href="travel.html">Travel</a><a href="travel-deals.html">Travel Deals</a></li> </ul> </li> <li class="dropdown yamm-fw"><a href="index.html">private tours</a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="container"> <div class="row"> <div class="col-sm-4"><a href="basic-package.html">Basic Package</a></div> <div class="col-sm-4"><a href="basic-package-single.html">home</a></div> <div class="col-sm-4"><a href="index.html">home</a></div> </div> </div> </div> </li> </ul> </li> <li class="dropdown yamm-fw"><a href="itinerary.html">Itinerary</a></li> <li class="dropdown yamm-fw"><a href="index.html">Pages</a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="container"> <div class="row"> <div class="col-sm-4"><a href="index.html">home</a></div> <div class="col-sm-4"><a href="index.html">home</a></div> <div class="col-sm-4"><a href="index.html">home</a></div> </div> </div> </div> </li> </ul> </li> <li class="dropdown yamm-fw"><a href="index.html">Features</a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="container"> <div class="row"> <div class="col-sm-4"><a href="index.html">home</a></div> <div class="col-sm-4"><a href="index.html">home</a></div> <div class="col-sm-4"><a href="index.html">home</a></div> </div> </div> </div> </li> </ul> </li> <li class="dropdown"><a href="contact.html">Contact</a></li> </ul> </div> </nav> |
The following javascripts are required for the effects above:
|
1 2 3 |
<script src="assets/plugins/headroom/headroom.js"></script> <script src="assets/plugins/headroom/jQuery.headroom.js"></script> <script src="assets/plugins/headroom/init.js"></script> |
You fill find whole documentation of plugin in < script src="assets/plugins/headroom/init.js"></script>