# Mobile Menu Obstruction by Third-Party Plugins

When accessing a website on mobile devices, third-party plugin elements (such as online chat and join membership club buttons.) may obstruct the mobile menu. This can result in the left-bottom corner social media information and other help content being hidden, negatively affecting user experience. Necessary adjustments are required to resolve this issue.

<figure><img src="/files/gHyYvjlkOf5QwwAOyczV" alt="" width="375"><figcaption></figcaption></figure>

### **Problem Description**

* When the mobile menu is opened, the social media information and help content at the lower left corner may be obstructed by third-party plugin elements.
* This prevents users from accessing important menu information.

### **Solution**

Increase the z-index of the mobile menu to ensure that its contents are not obstructed by third-party plugin elements.

### **Steps to Follow**

1. Access the website's backend management system.
2. Navigate to the **Custom CSS** section under template settings.
3. Add the following code to the custom CSS:

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

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

<figure><img src="/files/gSbPVMbihZALXGTVgFgA" alt=""><figcaption></figcaption></figure>

### **Code Explanation**

* `.section-header { z-index: 9999999; }`: Elevates the container of the menu to ensure it appears at the front.
* `.modal, .product-media-modal { z-index: 9999999; }`: Resolves potential obstruction issues for pop-ups and other modal elements.

### **Important Notes**

* Ensure that this does not conflict with other essential page elements.
* It is recommended to thoroughly test after adding the styles to ensure normal functionality of the menu and other page elements.
* If any obstruction persists, consider adjusting the `z-index` value accordingly.

### **Verification Steps**

1. Open the website on a mobile device.
2. Click the menu button and confirm that all menu contents are displayed correctly.
3. Check for any remaining obstruction issues. If none are found, the settings are successful.

### **Conclusion**

By making the above simple CSS z-index adjustments, the issue of mobile menu obstruction by third-party plugin elements can be effectively resolved, thereby improving the user experience.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en-ascent.webvista.studio/header/mobile-menu-obstruction-by-third-party-plugins.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.