带有可折叠搜索表单的Bootstrap导航栏

Question

我正在尝试修复Linux Kamarada网站上有关搜索表单的错误。它的灵感来自于Android网站上的一个网站，该网站是一个不断扩展的搜索栏：

它在Mozilla Firefox上效果很好，但Google Chrome上却没有。

有一次，浏览网页时，我遇到了HPE的网站，我发现他们的搜索结果很棒：

它适用于所有浏览器，因此我认为它可以解决我的问题。

我尝试使用Bootstrap's dropdown模仿它（请参阅this example），这是我到目前为止所做的事情（我已经使用过Bootstrap's Fixed navbar example作为起点）：

（source code available at Bootply）

根据使用Web Developer的View Responsive Layouts进行的测试，它在小型，中型和大型设备（768px宽和更高）上正常运行，但不适用于超小型设备（例如移动设备）肖像，320x480）：

有谁知道如何解决这个问题？

此外，为了让hamburguer菜单以我想要的方式工作，我最终复制了HTML代码。有谁知道我怎么能避免这种情况？

最后但并非最不重要的是，我不确定代码是否可访问。我非常感谢你的建议。

提前谢谢！