Nav template (bt_affix, jquery_easing)
<!-- Nav -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Logo & mobile toggle menu -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="page-scroll navbar-brand" href="#page-top">Logo</a>
</div>
<!-- Nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#NavLink1">NavLink1</a>
</li>
<li>
<a class="page-scroll" href="#NavLink2">NavLink2</a>
</li>
<li>
<a class="page-scroll" href="#NavLink3">NavLink3</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
// NAV
.navbar-default {
// Logo
.navbar-brand {
.logo-font;
}
// Mobile menu
.navbar-collapse {
border-color: fade(#fff, 2%);
}
// Toggle icon
.navbar-toggle {
background-color: @color;
}
.nav {
> li {
// Nav link
> a{
.heading-font;
letter-spacing: 1px;
}
// Nav link active
&.active {
border-radius: 0;
}
}
}
// Nav media styles
@media @min-desktop {
// Navbar before offset
.transition-all;
background-color: transparent;
padding: 25px 0;
border: 0;
// Logo
.navbar-brand {
.transition-all;
font-size: 2em;
}
// Nav link Active
.nav > .active > a {
border-radius: 3px;
}
// Navbar after offset
&.affix {
background-color: @dark-gray;
padding: 10px 0;
// Logo
.navbar-brand {
font-size: 1.5em;
}
}
}
}