Menu Fixed

HTML

<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>

Javascript

$('nav').coreNavigation({
    menuPosition: "right",
    container: true,
    mode: 'fixed'
});

CSS

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;
    }
}