<!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <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">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span 

class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
</div></div>

<div class="row">
<div class="col-lg-2"><a href="#">Back</a></div>
<div class="col-lg-auto"><input type="text" class="form-control" style="width:80%"/></div>
</div>

<div class="row">
<div class="col-lg-2"> </div>
<div class="col-lg-10">
  Search Page
</div>
</div>


<div id="wrapper">
        <!-- 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>
		 <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>

		 <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>
		 <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">
            <div class="container-fluid">
                <h1>Simple Sidebar</h1>
                <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger 

screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
		<button id="menu-toggle" class="btn btn-secondary"><i id="toggleIcon" class="fa fa-angle-double-down"></i> Toggle Menu <i class="fa fa-

filter"></i></button>                
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->
 


  <div class="footer">
    <p>Footer</p>
  </div>
 

/*!
 * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT 

(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
 */

#menu-toggle{
color:white;
position: absolute;
top: 46px;
left: -45.75px;
transform: rotate(90deg);
background: black;
}



#wrapper {
  padding-left: 250px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 0px;
}


#sidebar-wrapper {
  
  
		    position: fixed;
  
                    left: 250px;
  
                    width: 250px;
  
                    height: 86.5%;
  
                    margin-left: -250px;
  
                    overflow-y: scroll;

  		    overflow-x: hidden;
                    background: #000;
  
		    -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
		
}


#wrapper.toggled #sidebar-wrapper {width: 0px;
}


#page-content-wrapper {
  width: auto;
  position: absolute;
  padding: 50px;
}


#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
  width:100%;
}




/* Sidebar Styles */


.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}


.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}


.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}


.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}


.sidebar-nav li a:active, .sidebar-nav li a:focus {
  text-decoration: none;
}


.sidebar-nav>.sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav>.sidebar-brand a {
  color: #999999;
}


.sidebar-nav>.sidebar-brand a:hover {
  color: #fff;
  background: none;
}


/**

@media(min-width:768px) {
  
#wrapper {
    padding-left: 0;
  }
  
#wrapper.toggled {
    padding-left: 0px;
  }
  
#sidebar-wrapper {
    width: 250px;
  }
  
#wrapper.toggled 
#sidebar-wrapper {
    width: 250px;
  }
  
#page-content-wrapper {
    padding-left: 50px;
    position: relative;
  }
  
#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
 padding-left: 35px; }

}

**/


.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

.row {
    margin-right: 0px;
    margin-left: 0px;
}

 $("#menu-toggle").click(function(e) {
 e.preventDefault();
	var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
	

      



        $("#toggleIcon").toggleClass("fa fa-angle-double-down fa fa-angle-double-up")
        $("#wrapper").toggleClass("toggled");

  	if(isIE11){
          if($("#wrapper").hasClass("toggled")){
	    $('#sidebar-wrapper').css("margin-left", "-268px")
	  } else {
	    $('#sidebar-wrapper').css("margin-left", "-250px")	
          }	 
	}
    });