展开浏览器搜索栏时无法点击移动导航答案

【问题标题】：Mobile navigation not clickable when browser search bar is expanded展开浏览器搜索栏时无法点击移动导航
【发布时间】：2021-08-15 13:42:38
【问题描述】：

大家好。

我目前正在为我的公司开发一个网站，现在我正面临导航菜单的问题，特别是在移动设备上，或者我应该说是移动浏览器（大部分）。

汉堡图标在浏览器的搜索栏展开时是可点击的，但在向下滚动时会变得无响应（因为搜索栏会缩小）。

它在 Chrome 浏览器上确实有效，因为它不会缩小搜索栏，但我尝试过的任何其他浏览器都拒绝这样做。（Safari、Firefox、三星浏览器等）

我不确定这会如何影响汉堡菜单，因为它在 Chrome/Safari 上完美运行，在移动模式下带有 Inspect 元素。

Here 是我的网站（仍在进行中）

【问题讨论】：

嗨，欢迎来到 SO。请先拨打tour。然后阅读how to ask questions here。之后编辑问题以符合指南并提供minimal reproducible example 以获取调试详细信息。另请阅读：can I just link to my Website?!
你能分享Code你做了什么吗？
欢迎来到 Stackoverflow！，不幸的是，这个问题没有提供任何代码，所以我们无法帮助你解决这个问题，创建一个 minimal reproducible example 并向我们展示你在尝试做时遇到的问题这个，也不要忘记查看 stackoverflow 的 How to ask 部分，以获取有关如何提出好问题以及该站点的 well suited 是什么类型的问题的提示

标签： html css browser navigationbar hamburger-menu

【解决方案1】：

根据我目前的测试，我怀疑您的导航弹出菜单有点太大而无法在 Mozilla Firefox 默认移动尺寸中弹出。如果我将移动设备尺寸翻转为横向，您将能够看到导航菜单的响应。

我建议您尝试在您的 css 代码中使导航菜单的宽度更小，这样可以通过最少的编辑来解决您的问题。

再次只是建议这可能不是最好的解决方案，但我个人认为它有效。

问候， JJSIMCYBERTECH。

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <div class="nav">
            <h1>(Website Name)</h1>
            <input type="search" class="searchbox">
            <a href="#"><button class="btn">(Element)</button></a>
            <a href="#"><button class="btn">(Element)</button></a>
            <a href="#"><button class="btn">(Element)</button></a>
            <a href="#"><button class="btn">(Element)</button></a>
        </div>
        
        <style>
            .nav{
                background-color: lightgreen;  
                border: 2px solid white;
                /* choose your color */
                color: red;
            }
                
            .searchbox{
            
                background-color: gray;
                width: 300px;
                height: 35px;
                color: white;
            }
            
            .btn{
                border: none;
                background-color: #184a26;
            }
            
            .btn:hover{
                padding: 5px;
            }
            
        </style>
        
    </body>
</html>

【讨论】：