title: Bootstrap responsive sidebar resize to icon menu in small screen <800px
body: <p><strong>Background</strong></p>
  
  <p>Unfortunately I don't have much experience with modern CSS (Media Queries), coming from the world of PHP. As a result I am not sure how to logically troubleshoot my CSS layout issues.</p>
  
  <p>I am trying to create a user dashboard template and have been following a few tutorials. The requirements of this template are as follows:</p>
  
  <ol>
  <li>The main content area is bootstrap responsive</li>
  <li>The sidebar is collapsible into a small icon menu</li>
  <li>If a screen is less then 800px the sidebar menu is automatically</li>
  <li>When the sidebar is collapsed (if the screen is &lt;800px) it can be reopened</li>
  </ol>
  
  <p><strong>What I have cobbled together so far:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
          $('#sidebar-btn').click(function() {
              $('#sidebar-wrapper').toggleClass('visible');
              $('#wrapper').toggleClass('visible');
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* navbar */
  .navbar {
      margin-left:50px;
  }
  
  /* main content */
  #page-content-wrapper {
      width:100%;
      position:absolute;
      padding:15px;
      padding-top:50px;
  }
  
  /* sidebar minimized */
  #sidebar-wrapper {
      background:#444444;
      display:block;
      position:fixed;
      height:100%;
      z-index:1;
  }
  #sidebar-wrapper ul {
      margin:0px;
      padding:0px;
  }
  #sidebar-wrapper ul li {
      list-style:none;
  }
  #sidebar-wrapper ul li i {
      font-size:24px;
  }
  #sidebar-wrapper ul li span:nth-child(2) {
      display:none;
  }
  #sidebar-wrapper ul li a {
      display:block;
      padding:12px 12px;
      width:50px;
      color:#eeeeee;
      background:#222222;
      border-bottom:1px solid #444444;
  }
  #sidebar-wrapper ul li a:hover {
      color: #aaaaaa;
      background-color: #444444;
      text-decoration:none;
  }
  #sidebar-header {
      height:50px;
      background:#444444;
  }
  #sidebar-header h3 {
      display:none;
  }
  #sidebar-btn {
      display:inline-block;
      vertical-align:middle;
      cursor:pointer;
      position:absolute;
      top:0px;
      right:0px;
  }
  #sidebar-btn i {
      font-size:18px;
      color:#ffffff;
      padding:16px;
  }
  /* set element styles to fit tablet and higher(desktop) */
  @media screen and (min-width: 800px) {
      /* sidebar visible */
      #sidebar-wrapper.visible {
          left:0px;
      }
      #sidebar-wrapper.visible ul li span:nth-child(2) {
          display:inline-block;
      }
      #sidebar-wrapper.visible ul li i {
          color: #777777;
          font-size:14px;
          min-width: 20px;
          text-align: center;
      }
      #sidebar-wrapper.visible ul li a {
          background:#222222;
          color:#cccccc;
          border-bottom:1px solid #444444;
          display:block;
          width:200px;
          padding:15px;
          font-size:14px;
      }
      #sidebar-wrapper.visible ul li a:hover {
          background:#777777;
          color:#eeeeee;
      }
      #sidebar-wrapper.visible h3 {
          display:inline-block;
          margin:0px;
          color:#fff
      }
      #wrapper.visible #page-content-wrapper {
          padding-left:200px;
      }
      #wrapper.visible .navbar {
          margin-left:200px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  
  &lt;script src="https://use.fontawesome.com/3c2244d372.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrapper" class="visible"&gt;
      &lt;!-- sidebar --&gt;
      &lt;div id="sidebar-wrapper" class="visible"&gt;
          &lt;div id="sidebar-header"&gt;
              &lt;h3&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;i class="fa fa-tachometer"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Schedule&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;i class="fa fa-credit-card"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Orders&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;i class="fa fa-cogs"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Settings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;i class="fa fa-life-ring"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Help&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="sidebar-btn"&gt;
              &lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end sidebar --&gt;
  
      &lt;!-- main content --&gt;
      &lt;div id="page-content-wrapper"&gt;
  
          &lt;nav class="navbar navbar-fixed-top navbar-inverse"&gt;
              &lt;div class="container"&gt;
                  &lt;div id="navbar"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Signed in as&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div class="container-fluid"&gt;
  
              &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;h1&gt;Test Page&lt;/h1&gt;
              &lt;br&gt;
              &lt;p&gt;
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Question</strong></p>
  
  <p>I am having trouble with point four. So far, if I resize my screen the sidebar pops into an icon menu, but I can no longer expand that menu when the screen is in small mode. How I can override the CSS specificity so that when the class of visible is toggled I can view the menu again even when the screen is small.</p>