Custom Fixed Menu

coreNavigation using font awesome menu for this sample, include fontawesome css to make icon
HTML
<nav hidden>
    <div class="nav-header">
        <a href="#" class="brand">
            <img class="scrolled" src="/images/brand.png" />
            <img class="top" src="/images/brand-white.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>

<div class="home"></div>
Javascript
$('nav').coreNavigation({
    menuPosition: "right", // left, right, center, bottom
    container: true, // true or false
    mode: 'fixed',
    onInit: function(){
        console.log('Init coreNav');
    }
});

$(window).on('scroll', function(){
    if($(window).scrollTop() > 0){
        $('nav').addClass('scrolled');
    }else{
        $('nav').removeClass('scrolled');
    }
});
CSS
nav {
    border-bottom: solid 1px transparent;
    min-height: 60px;
    background: transparent;
}

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

nav .brand {
    display: block;
    position: relative;
    width: 170px;
    top: 20px;
}

nav .brand img {
    width: 100%;
}

nav .brand img.top{
    display: block;
}

nav .brand img.scrolled{
    display: none;
}

nav.scrolled .brand img.scrolled{
    display: block;
}

nav .menu li a {
    display: block;
    padding: 20px 25px;
    text-decoration: none;
    color: #fff;
}

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

nav.scrolled  .menu li.active > a,
nav.scrolled  .menu li a:hover {
	color: #e74c3c;
}

nav button {
    background: transparent;
    border: none;
    outline: none;
}

nav.scrolled{
    background: #fff;
    border-bottom: solid 1px #dfdfdf;
}

nav.scrolled .menu li a{
    color: #333;
}

nav.scrolled .brand img.top{
    display: none;
}

nav.scrolled .wrap-core-nav-list,
nav.scrolled .nav-header{
    background: #fff;
}

.home{
    position: relative;
    height: 70vh;
    background-image: url('/images/themes/jay-mantri-4033.jpg');
    background-size: cover;
    background-position: center center;
}

.home::before{
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    position: absolute;
}

@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;
        color: #fff;
    }

    nav.scrolled .nav-header .toggle-bar{
        color: #333;
    }

    .core-nav .wrap-core-nav-list{
        border-top: solid 1px rgba(255, 255, 255, 0.2);
        border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    }

    nav .menu li a {
        padding: 10px 10px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    }

    nav .menu li:last-child a {
        border-bottom: none;
    }

    nav.scrolled .wrap-core-nav-list{
        border-top: solid 1px #dfdfdf;
        border-bottom: solid 1px #dfdfdf;
    }

    nav.scrolled .menu li a {
        border-bottom: solid 1px #dfdfdf;
    }
}
Loading...