we are using a Elementor header template >> make it veiw for singlare – pages : Menu – Scroll horizontal

and we make Css Class for the nave menu : scrollmenu

 

then go to gear icon in the page > theme style > Custom CSS

add this :

https://www.youtube.com/watch?v=aqiC7tt-RGI&t=17s

 Link : 

https://www.mickthewpmentor.com

 

@media screen and (max-width: 768px) {
.
scrollmenu .elementor-nav-menu–layout-horizontal .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit- -scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
}

to remove the scrolling line when moving horizontally

.elementor-nav-menu::-webkit-scrollbar { display: none; }