Layout Fullscreen

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({
    layout: "fullscreen", 
    menuPosition: 'left',
    container: true 
})

CSS

nav {
    border-bottom: solid 1px #efefef;
    min-height: 60px;
    background: #fff;
}

nav .wrap-core-nav-list,
nav .nav-header {
    background: transparent;
}

nav .brand {
    display: block;
    position: relative;
    width: 170px;
    margin: auto;
}

nav .brand img {
    width: 100%;
}

nav .menu li a {
    color: #6a6a6a;
    text-decoration: none;
}

nav .menu li a:hover {
    color: #e74c3c;
}

@media (min-width: 992px) {
    .menu li a {
        font-size: 24px;
        line-height: 32px;
        color: #6a6a6a;
        text-decoration: none;
        display: block;
        margin: 10px 0;
    }
    .menu li a:hover {
        color: #e74c3c;
    }
}

@media (max-width: 992px) {
    nav .wrap-core-nav-list,
    nav .nav-header {
        background: #fff;
    }
    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;
        top: 15px;
    }
    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;
    }
}