Membuat Horizontal Scrollable Menu Untuk Mobile UI Elementor Wordpress

Horizontal scrollable menu merupakan trend website design saat ini, dimana untuk tampilan mobile tampilan hamburger mulai tertinggal

berikut merupakan cara Membuat Horizontal Scrollable Menu Untuk Mobile UI Elementor

Pastikan ada telah menginstall elementor pada website wordpress anda

1. Login pada wp admin anda.

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

3. Ubah tampilan menjadi tampilan mobile view dan drag Nav Menu

4. Ubah settingan Nav Menu menjadi berikut.

# 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. Masukan kode berikut pada bagian Custom CSS

.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; }
  
  

Silakan sesuaikan warna dan temanya sesuai kebutuhan anda dengan mengubah scriptnya.

Bila sudah silakan publish Header anda.

Refrensi :

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