# 手机端菜单被第三方插件遮挡处理

在移动设备端访问网站时，如果手机端菜单被第三方插件元素（例如在线聊天、加入会员俱乐部按钮等）遮挡，可能导致菜单中的左下角社媒信息及其他帮助内容无法正常显示。这种情况会影响用户体验，因此需要进行必要的调整。

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-249f5b5e3827d6825f5c42f40ffdf020e61099ce%2FIMG_8577.PNG?alt=media" alt="" width="375"><figcaption></figcaption></figure>

### **问题描述**

* 手机端菜单被打开时，左下角的社媒信息及帮助内容被第三方插件元素遮挡。
* 导致用户无法正常访问菜单中的重要信息。

### **解决方案**

通过提升手机端菜单的层级（z-index），确保菜单内容不会被第三方插件元素遮挡。

### **操作步骤**

1. 进入网站后台管理系统。
2. 找到模板设置中的**自定义CSS**区域。
3. 在自定义CSS中添加以下代码：

```
.section-header {
  z-index: 9999999;
}

.modal,
.product-media-modal {
  z-index: 9999999;
}
```

<figure><img src="https://311909351-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4wWUtlp1MoEyUGy5ARSJ%2Fuploads%2Fgit-blob-2627740f4ac0ab21ca6aae0a79639d092f56710a%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

### **代码说明**

* `.section-header { z-index: 9999999; }`: 提升菜单所在的容器层级，确保其显示在最前面。
* `.modal, .product-media-modal { z-index: 9999999; }`: 解决弹窗等可能被遮挡的情况。

### **注意事项**

* 确保不会对其他重要页面元素的层级产生冲突。
* 建议在添加样式后多次测试，确保菜单和其他页面元素功能正常。
* 如果网站中仍有遮挡情况，可以适当调整 `z-index` 值。

### **验证效果**

1. 打开手机端网站。
2. 点击菜单按钮，确认菜单中所有内容正常显示。
3. 检查是否仍有遮挡情况，若无异常即为设置成功。

### **总结**

通过上述简单的CSS层级调整，能够有效避免手机端菜单被第三方插件元素遮挡的问题，从而提升用户访问体验。
