Menu yang dapat di scrol secara horizontal adalah tren desain web saat ini, di mana untuk tampilan di handphone tampilan jenis hamburger pada umum nya mulai tertinggal.
Berikut adalah Cara Membuat Menu Horizontal Yang Dapat Di Scrol Handphone Menggunakan Elementor Pro
- 1. Login to your wp admin.
- 2. Templates > Theme Builder > Header > Add New Header
- 3. Ubah tampilan ke view to mobile view dan drag widget Nav Menu
4. Ubah pengaturan 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. Masukkan kode berikut di bagian Custom CSS
.mobile-menu ul{
/* mari kita atur tata letak horizontal untuk menu kita */
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
flex-wrap: inherit !important;
scrollbar-width: none;
/* ini akan menghapus scroll-bar untuk browser berbasis mozilla */
}
.mobile-menu a:link, a:visited{
/* beberapa penyesuaian grafis untuk tag A */
background: none;
color: #000000;
}
.mobile-menu a:hover{ /* some graphic adjustmend for the A tag */
background-color : none;
color: #000000;
}
.mobile-menu .elementor-item-active{
/* beberapa penyesuaian grafis untuk tag A */
background-color : #3957fa;
color: #000000;
}
.mobile-menu ul::-webkit-scrollbar {
/* sekarang, mari kita hapus scroll-bar dari menu */
display: none; }
Silahkan sesuaikan warna dan tema sesuai kebutuhan dengan mengubah script. Jika sudah klik publish
