Mobile Menu Obstruction by Third-Party Plugins
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
Increase the z-index of the mobile menu to ensure that its contents are not obstructed by third-party plugin elements.
Steps to Follow
Access the website's backend management system.
Navigate to the Custom CSS section under template settings.
Add the following code to the custom CSS:
.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.
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.
Open the website on a mobile device.
Click the menu button and confirm that all menu contents are displayed correctly.
Check for any remaining obstruction issues. If none are found, the settings are successful.
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.
