title: Hiding and managing navbar elements on small screen
body: <p>This is what my current navbar looks like on big screen:</p>
  
  <p><img src="https://i.gyazo.com/36f6fa663eaac1d81960629b9936fbee.png" alt="current"></p>
  
  <p>And this is what it looks like on small screen(phone)</p>
  
  <p><img src="https://i.gyazo.com/591a74eb9cdc7d4755ac9a55ff57dedb.png" alt="small"></p>
  
  <p>What i would like to happen is, make the U logo on top left disappear and make the "get in touch" get closer with rest of the elements (I used pull-right class to make get in touch move to the right on big screen) and instead of the navbar being in the center, i would like it to be spread 100% horizontally so it's easier to click them</p>
  
  <p><img src="https://i.gyazo.com/68cd275c2aafc9921fb5238af1bc2bc8.png" alt="aim"></p>
  
  <p>Here's my code right now:</p>
  
  <p><a href="http://www.bootply.com/G30iN5Ai4u" rel="nofollow">http://www.bootply.com/G30iN5Ai4u</a></p>
  
  <p>I tried using the .hidden-xs class to hide the logo but it didn't work</p>