Elementor : Create Mobile Horizontal Scrollable Menu

Horizontal scrollable menus are a current website design trend, where for mobile displays, the hamburger display is starting to lag behind

here is how to Create Mobile Horizontal Scrollable Menu UI elementor

Make sure you have installed elementor on your wordpress website

1. Login to your wp admin.

2. Templates > Theme Builder > Header > Add New Header

3. Change the view to mobile view and drag the Nav Menu

4. Change the Nav Menu settings to the following.

# Content

Layout. Horizontal

BreakPoint. None

# Advance

Advance > CSS Classes. mobile-menu
Responsive > Hide On desktop = Hide
Responsive > Hide On Tablet = Hide
Responsive > Hide On Mobile = Show

5. Enter the following code in the Custom CSS section

.mobile-menu ul{ /* let's set the horizontal layout for our menu */
     white-space: nowrap;
    overflow-x: auto; 
    overflow-y: hidden;
    flex-wrap: inherit !important;
    scrollbar-width: none;
    
    /* this will remove scroll-bar for mozilla based browser */
}
 
.mobile-menu a:link, a:visited{ /* some graphic adjustmend for the A tag */
    background: #ed1b24;
    color: #000000;
  
}
.mobile-menu a:hover{ /* some graphic adjustmend for the A tag */
    background-color : #283890;
    color: #000000;
  
}
.mobile-menu .elementor-item-active{ /* some graphic adjustmend for the A tag */
    background-color : #283890;
    color: #000000;
  
}
.mobile-menu ul::-webkit-scrollbar { /* now, let's remove the scroll-bar from the menu */
  display: none; }

Please adjust the color and theme according to your needs by changing the script.

If so, please publish your header.

Refrensi :

https://alessandrodecristofaro.it/mobile-horizontal-scrollable-menu/