MegaMenu side menu inner column shadows (mobile)

Hi browmaniac,

Thank you for reaching out to us. The issue you’re experiencing with the box-shadow can be resolved with custom CSS, as ElementsKit currently does not have a controller to hide the box shadow specifically for mobile and tablet views.

Here’s how you can do it:

1. Add a custom class to your container. For example, let’s use .hide-shadow-mobile.
2. Apply the following CSS code to hide the box shadow on mobile and tablet views:

@media (max-width: 1024px ) {
.hide-shadow-mobile {
box-shadow: none !important;
}
}

This CSS will remove the box shadow for devices with a screen width of 1024px or less, which includes most tablets and mobile devices.

For more clarification, please refer to the video.

Regards
Ikbal

@tusherikbal Awesome, will try it when I get back to it. Meanwhile another question about mobile menu. When I open categories the list can be dragged around horizontally, how to permanently fix if so there wont be such possibility to move it? See video for better understanding: https://we.tl/t-B1Nf1cKoFM

Hi browmaniac,

I hope you’re doing well. It seems you’re experiencing an issue with the mobile menu where the category list can be dragged horizontally. This can be fixed with a simple CSS adjustment. Please follow these steps:

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Add the following CSS code:

@media (max-width: 767px) {
.ekit_menu_responsive_mobile .elementskit-navbar-nav-default .elementskit-navbar-nav,
.ekit_menu_responsive_tablet .elementskit-navbar-nav-default .elementskit-navbar-nav {
overflow-x: clip !important;
}
}

This will prevent the list from being dragged horizontally on mobile devices.

Regards,
Ikbal

• This reply was modified 3 months ago by Tusher Ikbal.

Thanks! Everything you provided worked like a charm ??