<![CDATA[<!-- nav top -->
<div class="navtop">
<div class="navtop-layout">
<div class="navtop-left">
<ul class="navtop-left-items">
<li>
<a href="#">
<i class="fa fa-phone"></i>
<span> +62 (123) xxxxxxxxx</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope"></i>
<span> example@email.com</span>
</a>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="navtop-right">
<ul class="navtop-right-items">
<li>
<a href="#">
<i class="fa fa-user"></i>
<span> Login</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-lock"></i>
<span> Register</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end nav top -->
<!-- navbar -->
<div class="nav" id="navSticky">
<!-- nav sticky -->
<div class="nav-sticky">
<div class="nav-layout">
<div class="nav-logo">
<a href="#">
<img src="img/icon-core.png" alt="icon-core">
</a>
</div>
<div class="nav-toggle" id="navToggle">
<i class="fa fa-list-ul"></i>
</div>
<div class="nav-items" id="navItems">
<ul class="nav-items-list">
<li><a href="#">link</a></li>
<li data-toggle1>
<a>dropdown
<i class="fa fa-angle-down arrow-dropdown"></i>
</a>
<ul class="dropdown" data-dropdown1>
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>
</li>
<li class="position-megadropdown" data-megatoggle1>
<a>mega dropdown
<i class="fa fa-angle-down arrow-megadropdown"></i>
</a>
<ul class="mega-dropdown" data-megadropdown1>
<li class="row grid layout-m">
<ul class="column grid l3 m6 s12 mega-list">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
<ul class="column grid l3 m6 s12 mega-list">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
<ul class="column grid l3 m6 s12 mega-list">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
<ul class="column grid l3 m6 s12 mega-list">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</li>
<li class="mega-all-link"><a href="#">All Link</a></li>
</ul>
</li>
<li>
<ul class="nav-search">
<li class="nav-search-input">
<form action="#" method="get">
<input type="text" name="search" placeholder="search">
<i class="fa fa-search nav-icon-search"></i>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end navbar -->
]]>
JS
<![CDATA[$(window).scroll(function(){
var scroll = $(this).scrollTop();
// sticky
if(scroll > $("#navSticky").offset().top - 0){
$(".nav-sticky").addClass("sticky");
}else{
$(".nav-sticky").removeClass("sticky");
}
});
]]>
