title: bootstrap full screen menu on all devices
body: <p>I'm using navbar-fixed-top and I'd like my menu items to appear in full width below the navbar upon hitting the burger-icon. </p>
  
  <p>The menu should go all the way to the bottom of the screen. And the burger-icon should change to an X-icon when the menu is open.</p>
  
  <p>This behaviour should happen no matter what device the visitor is using.</p>
  
  <p>Here's my <a href="http://drupal-85630-345685.cloudwaysapps.com/" rel="nofollow noreferrer">dev site</a> and here's a mockup:</p>
  
  <p><a href="https://i.stack.imgur.com/Q8x90.jpg" rel="nofollow noreferrer">mockup</a></p>
  
  <p>As you see I've achieved the full width menu items but I'm unsure as to how to do the following: </p>
  
  <ul>
  <li>achieve the desired height </li>
  <li>make the burger icon change into an X upon toggle.</li>
  </ul>
  
  <p>Any ideas?</p>