Return to previous page

How do I edit arrow icon and scroll bar margin and padding on categories of mobile menu?

This topic has 8 replies, 2 voices, and was last updated 3 weeks, 4 days ago ago by Jack Richardson

Sam

Participant

August 22, 2024 at 12:49

Hi,

1. I want the arrow icon and scroll bar not to be too close in the categories of the mobile menu.
How do I edit the arrow icon margin and padding in the categories of the mobile menu?

2. I want the scroll bar to disappear automatically after stopping moving the menu or categories and appear when moving again.
How do I do? and, how do I edit the scroll bar margin and padding?

Thank you very much.

Files is visible for topic creator and
support staff only.

#411162 Copied Theme version: 9.3.17

7 Answers
Jack Richardson

Support staff

August 23, 2024 at 08:33
Dear @Sam,

I hope this message finds you well. I am writing to provide assistance with the customization of your CSS settings.

1. To change the space of arrow in your mobile menu element, please use the following CSS snippet for the Mobile menu widget in your header:
```
selector .etheme-elementor-nav-menu-item-icon {
    margin-inline-end: 5px;
}
```
2. Regarding the scrollbar behavior, it is generally influenced by your browser settings and is not directly related to our theme. However, you can attempt to modify it using this CSS snippet to be added to your Mobile menu element in header:
```
@media only (hover: hover) {
   selector .etheme-elementor-off-canvas_content:not(:hover) {
        overflow: hidden;
    }
}
```
Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Best Regards,
Jack Richardson
The 8Theme Team
#411269 Copied
Sam

Participant

August 23, 2024 at 10:26

Hi, thank you.

Q1. The CSS code is working.

Q2. Thank you for your support.
I put the CSS code on the Custom CSS of the Mobile menu element in the header, but it didn’t work when tested with different browsers on mobile phones.
I tried to test browsing other websites using different browsers on my mobile phone. The scroll bar of other websites would disappear after moving.

Can you help me again to solve this problem?

and I have another question.
I scroll down at the end of the mobile menu, the background continues to scroll down.
I want the website background not to scroll down after I open the mobile menu and scroll down.

Thank you very much.

Files is visible for topic creator and
support staff only.

#411303 Copied
Jack Richardson

Support staff

August 23, 2024 at 11:10
Hello @Sam

To lock the screen when the off-canvas content opened you can add next custom CSS in Theme Options -> Theme Custom CSS -> Global CSS:
```
.etheme-elementor-off-canvas--shown {
    overflow: hidden;
}
```
Please, try to use the same CSS code but without @media wrapper like next way:
```
selector .etheme-elementor-off-canvas_content:not(:hover) {
        overflow: hidden;
    }
```
Kind regards, Jack Richardson
#411314 Copied
Sam

Participant

August 23, 2024 at 12:35

Hi, thank you for your support.

1. The lock screen is solved, but the mobile menu is also locked.
If the front page is displayed and I click the mobile menu immediately, the menu is normal.
But, if I scroll down the front page and then click the mobile menu after three or four times, the mobile menu will be locked.
It started fine, but then something went wrong.

2. I tried to use different browsers to test.
The scroll bar does not disappear after moving.

Please help me.
Thank you.

I use wetransfer platform to upload the video.
Wetransfer Platform Download link:
https://we.tl/t-zWaS4LfhyS

Please check.
Thank you.

Please contact administrator
for this information.

#411331 Copied

Sam

Participant

August 23, 2024 at 13:23

Hi,

I updated the video.

I use wetransfer platform to upload the video.
Wetransfer Platform Download link:
https://we.tl/t-PIHV4bnRcu

Please check.
Thank you.

#411347 Copied

Sam

Participant

August 23, 2024 at 19:15

Hi,

I tested again.

I delete the following CSS code,
selector .etheme-elementor-off-canvas_content:not(:hover) {
overflow: hidden;
}

Lock the screen CSS code is working.

So, the problem that the scroll bar does not disappear after moving has not been solved yet.

Please help me.
Thank you.

#411410 Copied

Jack Richardson

Support staff

August 26, 2024 at 08:29

Dear @Sam,

I hope this message finds you well. We have noticed that your recent inquiries appear to be requests for customizations rather than questions pertaining to issues or bugs related to our theme. We would like to kindly remind you that our support services are provided in accordance with Envato’s support policy.

Should you require assistance beyond the scope of our standard support, such as additional customizations, we invite you to submit a request through our dedicated customization panel at: https://www.8theme.com/account/#etheme_customization_panel.

Thank you for your understanding and cooperation.

Best regards,
Jack Richardson
The 8Theme Team

#411606 Copied
Tagged: edit arrow icon, mobile menu customization, padding on categories, scrollbar margin adjustment, woocommerce menu design, woocommerce wordpress themes
Viewing 8 results - 1 through 8 (of 8 total)