title: Bootstrap navbar with collapsible search form
body: <p>I'm trying to fix a bug on the <a href="http://kamarada.github.io/" rel="nofollow noreferrer">Linux Kamarada</a> website regarding the search form. It is inspired on the one present on the <a href="https://www.android.com/" rel="nofollow noreferrer">Android</a>'s website, which is an expanding search bar:</p>
  
  <p><a href="https://i.stack.imgur.com/mK2Xi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mK2Xi.jpg" alt="enter image description here"></a></p>
  
  <p>It works very well on <a href="https://www.mozilla.org/firefox/" rel="nofollow noreferrer">Mozilla Firefox</a>, but not at all on <a href="https://www.google.com/chrome/" rel="nofollow noreferrer">Google Chrome</a>.</p>
  
  <p>Once, browsing through the web, I came across <a href="https://www.hpe.com/" rel="nofollow noreferrer">HPE</a>'s website and I found their search form awesome:</p>
  
  <p><a href="https://i.stack.imgur.com/pE717.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pE717.png" alt="enter image description here"></a></p>
  
  <p>It works well on all browsers, so I thought it could be a solution to my problem.</p>
  
  <p>I've tried to imitate it using <a href="http://getbootstrap.com/components/#dropdowns" rel="nofollow noreferrer">Bootstrap's dropdown</a> (see <a href="https://www.bootply.com/RkDZcAAnSA#" rel="nofollow noreferrer">this example</a>) and here is what I've got so far (I've used <a href="http://getbootstrap.com/examples/navbar-fixed-top/" rel="nofollow noreferrer">Bootstrap's Fixed navbar example</a> as a starting point):</p>
  
  <p><a href="https://i.stack.imgur.com/TEMKH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEMKH.png" alt="enter image description here"></a></p>
  
  <p>(<a href="https://www.bootply.com/3x6gwBO3cz" rel="nofollow noreferrer">source code available at Bootply</a>)</p>
  
  <p>According to tests made with <a href="https://chrispederick.com/work/web-developer/" rel="nofollow noreferrer">Web Developer</a>'s View Responsive Layouts, it is working as expected on small, medium and large devices (768px wide and up), but not on extra small devices (e.g. mobile portrait, 320x480):</p>
  
  <p><a href="https://i.stack.imgur.com/yzjmX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yzjmX.png" alt="enter image description here"></a></p>
  
  <p>Does anyone know how to fix that?</p>
  
  <p>Also, for the hamburguer menu to work the way I wanted, I ended up duplicating HTML code. Does anyone know how could I avoid that?</p>
  
  <p>Last but not least, I'm not sure that code is accessible. I would appreciate very much advice about that.</p>
  
  <p>Thank you in advance!</p>