feh1ks
4/19/2016 - 11:28 PM

Nav template (bt_affix, jquery_easing)

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

    }
}