side nav responsive

make bootstrap side navigation in desktop view menu break down to hidden side panel menu for mobile view

by Hector de la Rosa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/IronSummitMedia/startbootstrap-simple-sidebar/gh-pages/css/simple-sidebar.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="wrapper" class="toggled">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <nav class="navbar navbar-default navbar-fixed-top ">
      <div class="container" style="width:auto">
        <div class="navbar-header">
         <button id="menu-toggle" type="button" class="navbar-toggle" style="display:block;float:left;">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
          
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          
      ...

CSS

/* Allow space for navbar at top of page */
#sidebar-wrapper{
    margin-top: -50px;
}

/* get rid of padding so that navbar will line up with content */
#page-content-wrapper{
    padding: 0px;
    margin-top: 50px;
}

/* Must get rid of right and left properties so that the navbar will slide with content */ 
.navbar-fixed-top{
    width: 100%;
    right: auto;
    left: auto;
}

JavaScript

$("#menu-toggle").click(function(e) {
    //e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    
});