带可折叠搜索表单的自举导航栏

我正在尝试修复关于搜索表单的Linux Kamarada网站上的一个错误。它是灵感的一个目前Android的网站上，这是一个扩大搜索栏：带可折叠搜索表单的自举导航栏

它非常好于Mozilla Firefox，但不是在所有的Google Chrome。

一旦通过网页浏览，我遇到HPE的网站，我发现自己的搜索表单真棒：

它运作良好，在所有浏览器，所以我认为这可能是一个解决方案对我的问题。

我试着用Bootstrap's dropdown（见this example）模仿它，这里是我有这么远（我用Bootstrap's Fixed navbar example为起点）：

根据使用Web Developer的查看响应式布局进行的测试，它可以在小型，中型和大型设备（768像素以上）上按预期工作，但不适用于额外小型设备（例如移动肖像，320x480）：

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

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

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

预先感谢您！

我几乎放弃并考虑使用一个简单的navbar-form与搜索输入（如this我发现googling），那是当我发现这一点，正是我一直在寻找：Bootsnipp Navbar with Search（即片断非常接近Bootsnipp网站本身实际使用的搜索）。

我喜欢它，并将其改编成Linux Kamarada网站。结果可以看出已经在生产中：

以防万一任何人需要，我试图抓住这个想法的基本知识，并将可折叠搜索表单的导航栏应用于Bootstrap's Sticky footer with navbar example。结果可以在这里看到：https://www.bootply.com/cf8Go56f4p

而且，万一有人正在寻找与搜索和点击该页面导航栏，我发现这个有趣的片段，并建议其：Simple Navbar Search

2017-08-12 03:28:17

回答