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.

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;
}

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.