Return to previous page

How to remove Gray vertical line in mobile menu?

This topic has 8 replies, 3 voices, and was last updated 5 years, 1 months ago ago by tuijatuulia

tuijatuulia

Participant

October 29, 2020 at 19:46

Hi I have this kind of additional vertical gray line appearing in mobile menu, when clicking or scrolling – how to remove it? Please see video.

Please, contact administrator
for this information.

#256990 Copied Theme version: 7.0.2 WooCommerce version: 4.6.1

7 Answers
Olga Barlow

Participant

October 30, 2020 at 12:06
Hello,

Go to Theme Options > Custom CSS and try to add the following code, clear cache and check

.et-off-canvas .et-content.mobile-menu-content::-webkit-scrollbar { display: none; }

Regards
#257045 Copied
tuijatuulia

Participant

October 31, 2020 at 19:06

Hi, I cleared cache on server and client but it did not help the mobile view, I’m still seeing the grey bar.

#257214 Copied

tuijatuulia

Participant

October 31, 2020 at 19:07

maybe we could color it white, it is only a tiny bit over the arrows.. but sure better would be to hide it.

#257215 Copied

Rose Tyler

Support staff

November 1, 2020 at 10:23

Have you cleared cache of your mobile browser? What model of phone and browser do you use?

Regards

#257262 Copied

tuijatuulia

Participant

November 1, 2020 at 11:42

Yes, I have cleared cache in mobile. Usually I use Firefox in mobile, Tested both with Samsung and Nokia androids, both have that line in firefox. Chrome does not show it.

#257276 Copied
Rose Tyler

Support staff

November 1, 2020 at 16:10
Mozilla Firefox does not support feature to customize scrollbar but we have provided you some custom to make your content not fully broken on mobile devices in Firefox

.et_b_header-search:not(.et_element-top-level) .input-row { display: block; } .et_b_header-search:not(.et_element-top-level) .input-row input[type=text] { width: calc(100% - 40px); float: left; } .et_b_header-mobile-menu .et-mini-content { padding-left: 0 !important; padding-right: 0 !important; } .et_b_header-mobile-menu .et-mini-content .et-content > * { max-width: calc(100% - 60px); margin-left: 30px; } .et_b_header-mobile-menu .et-mini-content .et_b_header-menu > .menu-main-container { max-width: unset; }

Regards
#257316 Copied
tuijatuulia

Participant

November 2, 2020 at 23:27

Oh, perfect!! This works well and Firefox does not show the scrollbar anymore. This is great – most of the customers will use mobile devices.

#257426 Copied
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘How to remove Gray vertical line in mobile menu?’' has been successfully resolved, and the topic is now closed for further responses

How to remove Gray vertical line in mobile menu?

Explore our best WordPress WooCommerce Themes collection