<nav hidden>
<div class="nav-header">
<a href="#" class="brand">
<img src="/images/brand.png" />
</a>
<button class="toggle-bar">
<span class="fa fa-bars"></span>
</button>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
$('nav').coreNavigation({
menuPosition: "right",
container: true,
mode: 'fixed'
});
nav {
border-bottom: solid 1px #efefef;
min-height: 60px;
background: #fff;
}
nav .wrap-core-nav-list,
nav .nav-header {
background: #fff;
}
nav .brand {
display: block;
position: relative;
width: 170px;
top: 20px;
}
nav .brand img {
width: 100%;
}
nav .menu li a {
display: block;
padding: 20px 25px;
text-decoration: none;
color: #3a3a3a;
}
nav .menu li.active > a,
nav .menu li a:hover {
color: #e74c3c;
}
nav button {
background: transparent;
border: none;
outline: none;
}
@media (max-width: 992px) {
nav .full-container,
nav .nav-container {
padding-left: 0;
padding-right: 0;
}
nav .nav-header {
min-height: 60px;
}
nav .nav-header .brand {
margin: 0 auto 5px;
float: none;
}
nav .nav-header .toggle-bar {
font-size: 18px;
position: absolute;
top: 17px;
left: 15px;
}
nav .menu li a {
padding: 10px 10px;
border-bottom: solid 1px #efefef;
}
nav .menu li:last-child a {
border-bottom: none;
}
}