Scroll on mobile

Hi tibo,

Please can you try this?

https://megamenu.com/documentation/how-to-add-a-scrollbar-to-the-mobile-menu/

Regards,
Tom

Hi,

Thanks for your fast reply.

I have added this following codes and the menu is not good on mobile and I send you all my css codes if you find something that block the responsive menu :

/* GLOBAL */

@include mobile {
    #{$wrap} #{$menu} {
        max-height: 300px;
        overflow: auto;
    }
}

#{$wrap} #{$menu} a{
	font-family: "Avenir Next", Avenir next, arial, sans-serif !important;
	font-weight: 800 !important;
}

#{$wrap} #{$menu} > li.mega-menu-item > ul{
	box-shadow: 0px 5px 5px rgba(0,0,0,0.15);
}

/* NIVEAU 1 */

#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link,
#{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link:hover{
	background-position: left center !important;
	padding-left: 20px !important;
	background-size: 30px 30px !important;
	background-repeat: no-repeat !important;
}

/* NIVEAU 2 */

#{$wrap} #{$menu} > li.mega-menu-item > ul > li.mega-menu-item > a.mega-menu-link,
#{$wrap} #{$menu} > li.mega-menu-item > ul > li.mega-menu-item > a.mega-menu-link:hover{
	background-position: left center !important;
	padding-top: 5px !important;
	padding-bottom: 10px !important;
	padding-right: 20px !important;
	background-size: 90px 90px !important;
	background-repeat: no-repeat !important;
	text-decoration: none !important;
	border-top: 2px solid #2dc4a4 !important;
	text-transform: capitalize !important;
}

@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item > ul{
		padding-left: 18% !important;
		padding-right: 18% !important;
		min-height: 220px !important;
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(1) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/04/gif-materiel-preparation.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(2) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/04/gif-cuisson-materiel.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(3) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/05/gif-materiel-cuisine-exterieur.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(4) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/04/gif-froid-1.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(5) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/04/gif-lavage2.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(6) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/05/gif-accessoires.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(7) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/04/gif-bar-cafe.gif);
	}
}
@media screen and (min-width: 1600px) {
	#{$wrap} #{$menu} > li.mega-menu-item:nth-child(8) > ul{
		padding-left: calc(18% + 200px) !important;
		background-size: 200px 200px !important;
		background-position: 18% top;
		background-repeat: no-repeat;
		background-image: url(https://staging-lerepaireduchef.kinsta.cloud/wp-content/uploads/2020/05/gif-mobilier-inox.gif);
	}
}
@include mobile {
  #{$wrap} #{$menu} {
    max-height: 300px;
    overflow: auto;
  }
}

My set up in your plug in :
https://ibb.co/yVzSXgk
https://ibb.co/0fqKhWn
https://ibb.co/Lx69xkQ

Hi tibofnt,

Ah, now I see (your site wasn’t loading when I checked earlier).

On mobile, you are in fact still using the default Elementor mobile menu system, so you would need to check in the Elementor settings for the menu element, or ask their support team if they can take a look.

Regards,
Tom

Hello,

Ok but I think it’s not the first issue with elementor.
Do you have tips or old forum to share me please ?
Thanks in advance,

Hi tibo,

The mobile menu on your site is still being controlled by Elementor. Only your desktop menu is using Max Mega Menu.

You cannot scroll the mobile menu because you have a fixed header enabled (I think in the Elementor settings), you would either need to disable that fixed header (so that it scrolls naturally), or ask Elementor how to make the mobile menu scrollable.

Regards,
Tom