Return to previous page

Side Menu disappear when clicking in menu item in mobile

This topic has 13 replies, 3 voices, and was last updated 12 months ago ago by Luca Rossi

Azza

Participant

December 19, 2023 at 08:26

Hello there

the menu is closed when i click on an item in the menu
as shown in the below screenshot

https://streamable.com/ub8wli

Please, contact administrator
for this information.

#377090 Copied Theme version: .9.2.5 WooCommerce version: 8.4.0

12 Answers

Rose Tyler

Support staff

December 19, 2023 at 08:45

Hello, Azza,

Thank you for contacting us and for using XStore.

For your convenience, please navigate to Theme Options, then proceed to Header Builder, followed by Mobile Menu, and finally select One Page Menu to toggle it Off.

We trust that the information provided will be of significant assistance to you.

Kind Regards,
8theme team

#377095 Copied

Azza

Participant

December 19, 2023 at 08:53

Thank you

it works fine now after following the steps you provided

#377097 Copied

Azza

Participant

December 19, 2023 at 09:19

Also, in the same video screen shot, the side menu item icons on mobile is on the right side of the menu item, while in desktop they are on left, which is what I want

desktop menu icons screenshot

https://snipboard.io/nx9TNw.jpg

#377101 Copied
Luca Rossi

Support staff

December 19, 2023 at 12:17
Hello @Azza,

Thank you for reaching out to us with your concern regarding the alignment of the menu item icons on your mobile site. We understand that you would like to have the icons on the left side, just as they appear on the desktop version.

To address this issue, please follow the steps below to add custom CSS to your website:

1. Navigate to Theme Options on your WordPress dashboard.
2. Click on Theme Custom CSS.
3. Locate the Global CSS section.
4. Copy and paste the following code snippet into the Global CSS box:
```
.et-mobile-panel .menu .type-img.position-left-bottom, 
.et-mobile-panel .menu .type-img.position-left-center, 
.et-mobile-panel .menu .type-img.position-left-top, 
.et_b_header-menu.et_element-top-level .menu .type-img.position-left-bottom, 
.et_b_header-menu.et_element-top-level .menu .type-img.position-left-center, 
.et_b_header-menu.et_element-top-level .menu .type-img.position-left-top, 
.header-mobile-menu .menu .type-img.position-left-bottom, 
.header-mobile-menu .menu .type-img.position-left-center, 
.header-mobile-menu .menu .type-img.position-left-top {
    flex-direction: inherit;
    justify-content: flex-start;
}
```
5. After adding the code, be sure to save your changes.

This custom CSS should align the menu item icons to the left side on the mobile version of your site, matching the desktop layout.

If you encounter any issues or need further assistance, please do not hesitate to contact us. We are here to help ensure your website looks and functions exactly as you desire.

Best Regards,

The 8Theme Team
#377126 Copied
Azza

Participant

December 27, 2023 at 13:53

hello there,

I have used the code and it changed only the icons website on the desktop to the right, which is opposite to what I want

#377805 Copied
Luca Rossi

Support staff

December 27, 2023 at 15:13
Hi @Azza,

Sorry for the confusion!

Please try with the following custom CSS codes instead:
```
.et-mobile-panel .menu .type-img.position-left-bottom, 
.et-mobile-panel .menu .type-img.position-left-center, 
.et-mobile-panel .menu .type-img.position-left-top,
.header-mobile-menu .menu .type-img.position-left-bottom, 
.header-mobile-menu .menu .type-img.position-left-center, 
.header-mobile-menu .menu .type-img.position-left-top {
    flex-direction: inherit;
    justify-content: flex-start;
}
```
Best Regards,
The 8Theme Team
#377811 Copied
Azza

Participant

December 27, 2023 at 15:40

This code hides all icons. still not the work as i want

and also, when i deleted the code, now the icons disappear Please fix the issues for me

#377813 Copied

Luca Rossi

Support staff

December 28, 2023 at 04:13

Dear Azza,

We would like to inform you that the visibility issue with the icons on your website is due to the lazyload functionality within the Litespeed cache plugin. To resolve this matter, we kindly request that you disable the Litespeed cache plugin and then verify if the icons are displayed correctly.

Should you require any further assistance, please do not hesitate to reach out to us.

Best regards,
The 8Theme Team

#377843 Copied

Azza

Participant

December 28, 2023 at 06:00

I disabled the light-speed cache but still, the SVG icons I was using do not appear

also all the icons i used on the website have disappear

#377848 Copied

Luca Rossi

Support staff

December 28, 2023 at 06:38

Dear Azza,

We are pleased to inform you that we have made some minor updates to the custom CSS codes. As a result, the functionality appears to be operating correctly, as evidenced by the following screenshot: https://prnt.sc/we-wO9TbantM

We kindly ask that you take a moment to review the changes at your earliest convenience. Please ensure that you clear all browser and system caches before proceeding with the verification to avoid any discrepancies caused by cached data.

Your attention to this matter is greatly appreciated. Should you encounter any issues or require further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

#377850 Copied

Azza

Participant

December 28, 2023 at 07:12

Thank you very much for your help The icons are now working exactly as I want on both desktop and mobile.

#377853 Copied

Luca Rossi

Support staff

December 28, 2023 at 07:17

Dear @Azza,

It is our pleasure to be of assistance. Should you require any further support, please do not hesitate to reach out.

Best regards,
The 8Theme Team

#377854 Copied
Tagged: fixing woocommerce mobile menu, mobile menu disappearing, resolving woocommerce menu disappearances, troubleshoot woocommerce menu, woocommerce side menu problems, wordpress mobile menu issues, wordpress woocommerce themes
Viewing 13 results - 1 through 13 (of 13 total)