navbar bs4

by Bhavik Bamania

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="side-collapse in ml-auto" id="navbarNav">
        <div class="navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">
                        <i class="fa fa-facebook-square"><span class="d-lg-none"> Facebook</span></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">
                        <i class="fa fa-instagram"></i><span class="d-lg-none"> Insagram</span>
                   ...

CSS

@media screen and (max-width: 991px) {
    .side-collapse {
        top: 50px;
        bottom: 0;
        right: 0;
        width: 40%;
        position: fixed;
        overflow: hidden;
        transition: width .4s;
        text-align: center;
    }
    .side-collapse.in {
        width: 0;
    }
}

JavaScript

var sideslider = $('[data-toggle=slide-collapse]');
var sel = sideslider.attr('data-target');

sideslider.click(function (event) {
    $(sel).toggleClass('in');
});