title: Bootstrap sidebar overlaps content when resizing
body: <p>i'm having an issue that i'm not capable to fix, i have a top bar and side bar that when the page get resized the sidebar goes to position absolute just below the top-bar, so it overlaps my content.</p>
  
  <p>Here i leave you my css code:</p>
  
  <pre><code>body{
      padding-top: 50px;
  }
  
  /* ADMIN NAVBAR */
  
  body {
      background-color: #f8f8f8;
  }
  
  #wrapper {
       width: 100%;
  }
  
  #page-wrapper {
      padding: 0 15px;
      min-height: 568px;
      background-color: #fff;
   }
  
  @media(min-width:768px) {
      #page-wrapper {
          position: inherit;
          margin: 0 0 0 250px;
          padding: 0 30px;
          border-left: 1px solid #e7e7e7;
      }
  }
  
  .navbar-top-links {
      margin-right: 0;
  }
  
  .navbar-top-links li {
      display: inline-block;
  }
  
  .navbar-top-links li:last-child {
      margin-right: 15px;
  }
  
  .navbar-top-links li a {
      padding: 15px;
      min-height: 50px;
  }
  
  .navbar-top-links .dropdown-menu li {
      display: block;
  }
  
  .navbar-top-links .dropdown-menu li:last-child {
      margin-right: 0;
  }
  
  .navbar-top-links .dropdown-menu li a {
      padding: 3px 20px;
      min-height: 0;
  }
  
  .navbar-top-links .dropdown-menu li a div {
       white-space: normal;
  }
  
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
      width: 310px;
      min-width: 0;
  }
  
  .navbar-top-links .dropdown-messages {
      margin-left: 5px;
  }
  
  .navbar-top-links .dropdown-tasks {
       margin-left: -59px;
  }
  
  .navbar-top-links .dropdown-alerts {
       margin-left: -123px;
  }
  
  .navbar-top-links .dropdown-user {
      right: 0;
      left: auto;
  }
  
  .sidebar .sidebar-nav.navbar-collapse {
       padding-right: 0;
       padding-left: 0;
   }
  
  .sidebar .sidebar-search {
      padding: 15px;
  } 
  
  .sidebar ul li {
      border-bottom: 1px solid #e7e7e7;
  }
  
  .sidebar ul li a.active {
      background-color: #eee;
  }
  
  .sidebar .arrow {
      float: right;
  }
  
  .sidebar .fa.arrow:before {
      content: "\f104";
  }
  
  .sidebar .active&gt;a&gt;.fa.arrow:before {
      content: "\f107";
  }
  
  .sidebar .nav-second-level li,
  .sidebar .nav-third-level li {
      border-bottom: 0!important;
  }
  
  .sidebar .nav-second-level li a {
      padding-left: 37px;
  }
  
  .sidebar .nav-third-level li a {
      padding-left: 52px;
  }
  
  @media(min-width:768px) {
      .sidebar {
          z-index: 1;
          position: absolute;
          width: 250px;
          margin-top: 51px;
      }
  
      .navbar-top-links .dropdown-messages,
      .navbar-top-links .dropdown-tasks,
      .navbar-top-links .dropdown-alerts {
          margin-left: auto;
      }
  }
  
  /*FIN ADMIN NAVBAR*/
  </code></pre>
  
  <p>Here is the html:</p>
  
  <p></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="http://localhost:8000"&gt;SCM&lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-header --&gt;
  
          &lt;ul class="nav navbar-top-links navbar-right"&gt;
              &lt;li&gt;&lt;a href="http://localhost:8000"&gt;&lt;i class="fa fa-home fa-fw"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;!-- /.dropdown --&gt;
              &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fa fa-user fa-fw"&gt;&lt;/i&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="http://localhost:8000/user/profile/1"&gt;Perfil&lt;/a&gt;&lt;/li&gt;
                                                      &lt;li&gt;&lt;a href="http://localhost:8000/user"&gt;Administrar&lt;/a&gt;&lt;/li&gt;
                                                      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://localhost:8000/logout"&gt;&lt;i class="fa fa-sign-out fa-fw"&gt;&lt;/i&gt;Logout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/li&gt;
              &lt;!-- /.dropdown --&gt;
          &lt;/ul&gt;
          &lt;!-- /.navbar-top-links --&gt;
  
          &lt;div class="navbar-default sidebar" role="navigation"&gt;
              &lt;div class="sidebar-nav navbar-collapse"&gt;
                  &lt;ul class="nav" id="side-menu"&gt;
                      &lt;li class="active" &gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-users fa-fw"&gt;&lt;/i&gt; Usuario&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="nav nav-second-level"&gt;
                              &lt;li&gt;
                                  &lt;a  href="http://localhost:8000/user/create"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Agregar&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="active" href="http://localhost:8000/user"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt; Mostrar todos los usuarios&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  data-toggle="modal" data-target="#searchModal_admin" href="#"&gt;&lt;i class='glyphicon glyphicon-search fa-fw'&gt;&lt;/i&gt; Busqueda avanzada&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li &gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-tags fa-fw"&gt;&lt;/i&gt; Ejercicios&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="nav nav-second-level"&gt;
                              &lt;li&gt;
                                  &lt;a  href="http://localhost:8000/exercise/create"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Agregar&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="active" href="http://localhost:8000/exercise"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt;Listar&lt;/a&gt;
                              &lt;/li&gt;
                                  &lt;li &gt;
                                  &lt;a href="#"&gt;&lt;i class="fa fa-certificate"&gt;&lt;/i&gt; Categoria&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="nav nav-third-level"&gt; 
                                      &lt;li&gt;
                                          &lt;a                                                 href="http://localhost:8000/exercise/activity/create"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Agregar
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a                                                 href="http://localhost:8000/exercise/activity"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt; Listar
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;!--BLOG--&gt;
                      &lt;li  &gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-newspaper-o fa-fw"&gt;&lt;/i&gt; Noticias&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="nav nav-second-level"&gt;
                              &lt;li&gt;
                                  &lt;a  href="http://localhost:8000/blog/create"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Añadir Noticia&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="active" href="http://localhost:8000/blog"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt; Mostrar todas las noticias&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-tag"&gt;&lt;/i&gt; Tags&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                                  &lt;ul class="nav nav-third-level"&gt; 
                                      &lt;li&gt;
                                          &lt;a                                                 href="http://localhost:8000/blog/tag/create"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Agregar
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a                                                 href="http://localhost:8000/blog/tag"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt; Listar
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;!--BLOG--&gt;
                      &lt;li  &gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-cogs  fa-fw"&gt;&lt;/i&gt; Configuración&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="nav nav-second-level"&gt;
                              &lt;li&gt;
                                  &lt;a                                         href="http://localhost:8000/config/personal"&gt;&lt;i class='glyphicon glyphicon-user'&gt;&lt;/i&gt; Información personal
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a                                         href="http://localhost:8000/config/theme"&gt;&lt;i class='fa fa-pencil fa-fw'&gt;&lt;/i&gt; Tema
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li  &gt;
                          &lt;a href="http://localhost:8000/admin/mail/comunicado"&gt;&lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt; Enviar Comunicado&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li  &gt;
                          &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-credit-card"&gt;&lt;/i&gt; Tipos de pago&lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="nav nav-second-level"&gt;
                              &lt;li&gt;
                                  &lt;a  href="http://localhost:8000/pagos/nuevo"&gt;&lt;i class='fa fa-plus fa-fw'&gt;&lt;/i&gt; Agregar&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="active" href="http://localhost:8000/pagos"&gt;&lt;i class='fa fa-list-ol fa-fw'&gt;&lt;/i&gt; Mostrar tipos de pago&lt;/a&gt;
                              &lt;/li&gt;                                
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.sidebar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-static-side --&gt;
      &lt;/nav&gt;
  
      &lt;div id="page-wrapper"&gt;
  
  &lt;form method="POST" action="http://localhost:8000/user/search" accept-charset="UTF-8" class="navbar-form-expanded navbar-form navbar-right visible-lg-block visible-md-block visible-xs-block" id="formSimpleSearch_admin"&gt;&lt;input name="_token" type="hidden" value="5Nv6nmk6CZ0yAeKNEDZ7KUaN45ewvVV9EqUZSpsc"&gt;
      &lt;div class="input-group" id ="divSearch_admin" style="width:100%"&gt;
           &lt;input type="search" class="form-control" placeholder="Buscar …" name="name" style="background-color:#efeded;"&gt; 
           &lt;span class="input-group-btn"&gt;&lt;button class="btn btn-default" type="submit" style="background-color:#222222"&gt;&lt;i class="fa fa-search" style="color:#9d9d9d;"&gt;&lt;/i&gt;&amp;nbsp;&lt;/button&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;table class="table table-striped"&gt;
      &lt;thead&gt;
          &lt;th&gt;Nombre&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Telefono&lt;/th&gt;
          &lt;th&gt;Tarifa&lt;/th&gt;
          &lt;th&gt;Operaciones&lt;/th&gt;
      &lt;/thead&gt;
              &lt;tbody&gt;
          &lt;td&gt;Alvaro Rubio Garc&amp;iacute;a&lt;/td&gt;
          &lt;td&gt;alvarorubio77@gmail.com&lt;/td&gt;
          &lt;td&gt;666777887&lt;/td&gt;
          &lt;td&gt;Tipo de pago 1&lt;/td&gt;
          &lt;td&gt;
              &lt;a href="http://localhost:8000/user/edit/1" class="btn btn-primary"&gt;Editar&lt;/a&gt;              
          &lt;/td&gt;
      &lt;/tbody&gt;
          &lt;/table&gt;
  
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;!-- /#wrapper --&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks!</p>