title: Responsive sidebar images don't show on resize
body: <p>This is my sidebar : <a href="https://jsfiddle.net/8ejwykwv/1/" rel="nofollow noreferrer">https://jsfiddle.net/8ejwykwv/1/</a></p>
  
  <p>The issue is that on small screens, sidebar completely disappears. Whereas what I'm trying to  achieve is on a certain screen size, have only images displayed. example : Home icon without Home text. And on a very small screen have only a button that slides the sidebar left and right or top-down.</p>
  
  <p>I tried using </p>
  
  <pre><code> @media(min-width:42em){
       .sidebar{
          width:4em;
       }
   }
  </code></pre>
  
  <p>But I'm pretty much lost.
  I understand media queries and what can be done with them, but I'm not sure how to manipulate with my sidebar and topbar so that I have like fa-fa bars that on click will show more than just an image.</p>
  
  <p>Link as a reference to what I have been trying:</p>
  
  <p><a href="https://codepen.io/wideckop/pen/ZOgOPq" rel="nofollow noreferrer">This link</a> and/or <a href="https://bootsnipp.com/snippets/djjrN" rel="nofollow noreferrer">This example</a></p>
  
  <p>Any help is appreciated. I'm a beginner so I apologize in advance if it may be simple thing. Any help is appreciated!</p>