Home » Blog » Cara Membuat Menu Navigasi Scroll Tampilan Mobile

Cara Membuat Menu Navigasi Scroll Tampilan Mobile

cara+membuat+menu+navigasi+scroll
Cara Membuat Menu Navigasi Scroll

Cara Membuat Menu Navigasi Scroll – Menu navigasi merupakan paparan menu website yang umumnya terletak di bagian paling atas (header). Fungsinya adalah untuk memudahkan pengunjung menjelajahi postingan artikel sesuai menu yang tersedia.

Pada tampilan desktop (komputer), menu ini biasanya berisi deretan kategori utama yang tampil berjajar. Sedangkan pada tampilan mobile (perangkat seluler), menu naviagasi biasanya berbentuk simbol burger (garis bertumpuk tiga).

Pada tampilan mobile, sebenarnya menu navigasi dapat dimodifiasi sesuai keinginan. Misalnya dibuat seperti tampilan desktop yang dapat digeser ke kiri atau ke kanan. Nah, bagi yang ingin memodifikasi tampilan menu seperti itu, silahkan simak pembahasan berikut ini mengenai cara membuat menu navigasi scroll pada tampilan mobile.

Cara Membuat Menu Navigasi Scroll Tampilan Mobile

Panduan membuat menu navigasi scroll berikut ini dikhususkan untuk pengguna wordPress. Karena panduan ini merupakan pengalaman pribadi pada tampilan website cilacapklik versi mobile.

Baca Lainnya :  Cara Setting WordPress Ketika Awal Membuat Blog

Untuk membuat menu navigasi scroll pada tampilan mobile, langkah-langkahnya adalah sebagai berikut:

1. Membuat Lokasi Menu Baru

Langkah pertama adalah membuat lokasi menu baru dengan menambahkan shortcode pada file functions.php.

Silahkan masuk ke dashboard wordPress, pilih menu Appearance > Theme File Editor > Theme Function. Tempelkan shortcode berikut ini pada functions.php dan klik save.

function wpb_custom_new_menu() {
register_nav_menu(‘my-custom-menu’,__( ‘Menu Mobile’ ));
}
add_action( ‘init’, ‘wpb_custom_new_menu’ );

2. Mengaktifkan Menu

Langkah kedua adalah mengaktifkan fungsi menu bar agar muncul pada halaman frontend dengan menambahkan shortcode pada header.php.

Kita bisa memanfaatkan custom hooks agar nantinya bisa disesuaikan akan tampil di header atau footer. Tempelkan shortcode berikut ini pada header.php melalui custom hooks.

<?php wp_nav_menu( array(
‘theme_location’ => ‘my-custom-menu’,
‘container_class’ => ‘custom-menu-class’ ) );
?>

Pada settingan custom hooks, silahkan seperti ini:
Action: After Header
Display On: Entri Website
Responsive Visibility: Mobile
Klik Publish

Baca Lainnya :  Cara Menampilkan Menu Penghasilan Di Blogger

3. Membuat Menu Baru

Langkah ketiga adalah membuat menu untuk mengatur apa saja yang akan ditampilkan pada menu navigasi.

Silahkan masuk ke dashboard wordPress, pilih menu Appearance > Menus > Create A New Menu.

Isilah daftar menu yang akan ditampilkan. Setelah itu, pilih/centang Menu Mobile dan klik Save Menu.

4. Menambahkan CSS

Langkah ke empat adalah mengatur tampilan menu navigasi scroll dengan menambahkan code css.

Silahkan masuk ke dashboard wordPress, pilih menu Appearance > Customize > Additional CSS. Tempelkan code css berikut ini dan klik publish.

@media (min-width:768px) {
.custom-menu-class {
display:none;
}
}
.custom-menu-class {
margin-top: -20px;
margin-bottom: -20px;
}
.custom-menu-class ul {
overflow: auto;
white-space: nowrap;
overflow-x: auto;
margin: 1rem auto;
background-color: #fff;
background-image: linear-gradient(180deg, #247CFF 0%, #10a9FF 74%); text-align: center;
padding-inline-start: 10px;
}
.custom-menu-class li {
max-width: 48em;
display: inline-block;
padding: 5px 8px;
}
.custom-menu-class li a {
text-decoration: none;
font-size: 18px;
color: #fff;
}

Silahkan atur warna, padding, margin, ukuran font sesuai keinginan. Jika semua langkah dilakukan dengan benar, seharusnya menu navigasi scroll sudah tampil di perangkat seluler.

Demikianlah pembahasan mengenai cara membuat menu navigasi scroll untuk tampilan mobile. Semoga bermanfaat.

Baca Juga :

Scroll to Top