title: Change Side Nav Bar on window size change
body: <p>I am trying to make a side nav for a website. So far I am using a <code>&lt;nav&gt;</code> element and filling it with <code>&lt;li&gt;</code> to create my side bar.</p>
  <p>So far my code is below <em><strong>(p.s in-line styling is just for testing, I will be using an external css file later on)</strong></em>:</p>
  <pre><code>&lt;body&gt;
  
  &lt;nav style=&quot;background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;&quot;&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;&quot;&gt;Home Area&lt;/li&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;&quot;&gt;item one&lt;/li&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;&quot;&gt;item two&lt;/li&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;&quot;&gt;item three&lt;/li&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;&quot;&gt;item four&lt;/li&gt;
      &lt;li style=&quot;position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;&quot;&gt;item five&lt;/li&gt;
  &lt;/nav&gt;
  
  &lt;div class=&quot;container&quot; ng-controller=&quot;projectController&quot;&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>The above code outputs the following:</p>
  <p><a href="https://i.stack.imgur.com/lTa9n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lTa9n.png" alt="enter image description here" /></a></p>
  <p><strong>Whats my issue!</strong></p>
  <p>I am trying to change the side nav bar if the user resizes their window or maybe they access the site from a iPad or iPhone etc.</p>
  <p><strong>If the screen is full-size display this (I am already displaying this)</strong></p>
  <p><a href="https://i.stack.imgur.com/aeBAJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aeBAJ.png" alt="enter image description here" /></a></p>
  <p><strong>But if the screen size goes below a certain size the nav bar automatically changes to:</strong></p>
  <p><a href="https://i.stack.imgur.com/WDz5s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDz5s.png" alt="enter image description here" /></a></p>
  <p><strong>I am not sure how to develop this functionality. Can anyone guide me in the right direction. If you need any more information please let me know.</strong></p>
  <p>Thanks in advance.</p>