Sidebar Navbar

A simple secondary vertical navigation for bootstrap 3

by bizamajig

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <i class="fa fa-bars"></i>

                        </button> <span class="visible-sm visible-xs navbar-brand">Payment Options</span>

                    </div>
                    <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">AuthorizeNet</a>

                            </li>
                            <li><a href="#">Paypal</a>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lacinia neque. Cras sed risus non nisl facilisis fermentum. Vestibulum non ante libero. Vestibulum ut ante turpis. Vivamus consectetur nibh sed sem aliquam interdum. Sed elementum tempus lorem, malesuada laoreet turpis tincidunt a. Etiam aliquet faucibus lectus, sed pharetra mi elementum sit amet. Aliquam auctor aliquam egestas.</p>
        </div>
    </div>
</div>

CSS

@media ( min-width: 768px ) {
    .sidebar-nav .navbar .navbar-collapse {
        padding: 0;
        max-height: none;
    }
    .sidebar-nav .navbar ul {
        float: none;
    }
    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }
}
@media ( max-width: 1000px ) { /* 991px) { */
    .sidebar-nav .navbar-header {
        float: none;
    }
    .sidebar-nav .navbar-toggle {
        display: block;
    }
    .sidebar-nav .navbar-collapse.collapse {
        display: none!important;
    }
    .sidebar-nav .navbar-nav {
        float: none!important;
    }
    .sidebar-nav .navbar-nav>li {
        float: none;
    }
    .sidebar-nav .navbar-collapse.collapse.in {
        display: block!important;
    }
    .sidebar-nav .collapsing {
        overflow: hidden!important;
    }
}