Css 正在尝试在移动设备上创建更可单击的菜单

我一直在摸索，并设法找出了确切的代码区域，这将或多或少地为我提供我正在寻找的结果。但我意识到它实际上破坏了网站。我会解释原因的

所以我希望我的电子商务网站的菜单在手机上更容易点击。事实上，菜单很难用你的手指点击，而且更多的时候它不能正常激活。因此，我找到了一种方法，通过调整代码使其更易于点击，但我刚刚意识到的问题是，它破坏了网站的其他区域。例如，“searh”栏不会单击，产品图像缩略图也不会返回到第一个。和边缘和面积有关

这是我的旧代码，这意味着可点击区域太小：

#mobile-nav-return {
z-index: 7000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 250ms;

新代码（这意味着可点击区域相当不错，但会弄乱网站上的其他元素）：

我真的不知道该怎么办。可能有一种完全不同的方法。我对这方面不太在行，但我还是设法取得了一些成果。。似乎把这一页的其余部分弄乱了。干杯

---

p、 看起来“宽度24%”部分是关键，它扩展了可点击区域。我已经尝试过将其缩小，但这两种方法都没有多大帮助。

如果您发布所有代码，也发布html，则会更容易帮助您。您需要提供问题的详细信息。没有上下文，谁也帮不上忙。到目前为止，您提供的内容可以以无限的方式呈现，具体取决于代码的其余部分。当问题在这里重现时，您知道您已经添加了足够的内容（使用snippet

按钮）。理想情况下，您应该只知道添加代码的相关部分，否则人们将不敢尝试提供帮助，因为这太难了。

#mobile-nav-return {
z-index: 7000;
position: fixed;
top: -5px;
bottom: -5px;
left: -5x;
width: 24%;
height: -5px;
background: rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 250ms;