Baru-baru ini, salah satu pengguna kami bertanya kepada kami bagaimana cara membuat sticky floating navigation menu untuk situs mereka?

Menu navigasi yang disetting untuk tetap berada di layar atas saat pengguna menggulir halaman ke bawah akan memberikan kesan tampilan yang sangat bagus bagi para pengguna. Sebab setiap menu yang ada akan sangat membantu para pengunjung website untuk menemukan informasi yang mereka cari.

Pada artikel ini, kami akan menunjukkan cara mudah membuat sticky floating navigation menu di Website.

Apa itu Sticky Floating Navigation Menu?

Sticky floating navigation menu adalah menu yang ‘menempel’ di bagian atas layar saat pengguna menggulir ke bawah. Ini membuat menu Anda terlihat oleh pengguna setiap saat.

Kami akan menunjukkan cara membuat menu persis seperti ini untuk situs Anda sendiri:

Mengapa dan kapan sticky menu bisa berguna?

Biasanya, menu navigasi atas berisi tautan ke bagian terpenting dari sebuah situs web. Menu sticky membuat tautan itu selalu terlihat, yang menyelamatkan pengguna dari menggulir kembali ke atas. Itu juga terbukti meningkatkan konversi. Karena pengguna selalu ingin cara yang lebih mudah.

Jika Anda menjalankan toko online, maka menu navigasi teratas Anda kemungkinan menyertakan tautan ke cart (keranjang), product categories (kategori produk), dan product search (pencarian produk). Membuat menu ini menetap di bagian atas web dan dapat membantu Anda mengurangi pengabaian keranjang dan meningkatkan penjualan.

Beberapa tema Website terbaik memiliki dukungan bawaan untuk sticky floating navigation menu. Cukup lihat pengaturan tema Anda di bawah Themes »Customize untuk mengaktifkan fitur ini.

Jika tema Anda tidak memiliki opsi ini, teruslah baca panduan ini hingga akhir, dan kami akan menunjukkan cara mudah membuat sticky floating navigation menu di tema Website atau toko WooCommerce mana pun.

Metode 1: Tambahkan Sticky Floating Navigation Anda Menggunakan Plugin

Ini adalah metode termudah. Kami merekomendasikannya untuk semua pengguna Website, terutama untuk pemula.

Jika Anda belum mengatur menu navigasi Anda, lanjutkan dan lakukan itu menggunakan instruksi kami tentang cara menambahkan menu navigasi di Website.

Setelah itu, Anda perlu menginstal dan mengaktifkan Sticky Menu pada Scroll plugin. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin Website.

Setelah aktivasi, Anda perlu mengunjungi halaman Settings » Sticky Menu untuk mengonfigurasi pengaturan plugin.

Pertama, Anda harus memasukkan ID CSS dari menu navigasi yang ingin Anda buat sticky.

Anda perlu menggunakan browser’s inspect tool Anda untuk menemukan ID CSS yang digunakan oleh menu navigasi Anda.

Cukup kunjungi situs web Anda dan arahkan mouse ke menu navigasi. Setelah itu, Anda perlu mengklik kanan dan memilih Inspect dari menu browser Anda.

Ini akan membagi layar browser Anda, dan Anda akan dapat melihat kode sumber untuk menu navigasi Anda.

Anda perlu menemukan baris kode yang berhubungan dengan navigasi Anda, atau header situs Anda. Ini akan terlihat seperti ini:

Jika Anda kesulitan menemukannya, arahkan kursor mouse ke baris kode yang berbeda di panel Inspect. Menu navigasi akan disorot sepenuhnya ketika Anda memiliki baris kode yang benar:

Dalam hal ini, ID CSS menu navigasi kami adalah navigasi situs.

Yang perlu Anda lakukan adalah memasukkan ID CSS menu Anda di pengaturan plugin dengan hashtag di awal. Dalam hal ini, itulah #site-navigation.

Jangan lupa untuk mengklik tombol ‘Save Changes’ di bagian bawah halaman.

Sekarang, lanjutkan dan periksa menu sticky Anda langsung di situs web Website Anda. Itu harus tetap berada di halaman saat Anda menggulir ke bawah, seperti ini:

Opsi selanjutnya pada halaman pengaturan plugin adalah menentukan ruang antara bagian atas layar Anda dan sticky navigation menu. Anda hanya perlu menggunakan pengaturan ini jika menu Anda tumpang tindih dengan elemen yang tidak ingin Anda sembunyikan. Jika tidak, abaikan pengaturan ini.

Sebaiknya biarkan kotak dicentang di sebelah opsi: ‘Check for Admin Bar’. Ini memungkinkan plugin untuk menambahkan beberapa ruang untuk bilah admin Website, yang hanya dapat dilihat oleh pengguna yang masuk.

Di sini, Anda dapat melihat bahwa bilah admin di situs pengujian kami ditampilkan dengan benar di atas menu tempel:

Opsi berikutnya memungkinkan Anda menghapus menu navigasi jika pengguna mengunjungi situs web Anda menggunakan layar yang lebih kecil seperti perangkat seluler:

Anda dapat menguji tampilan situs Anda di perangkat seluler atau tablet. Jika Anda tidak menyukai tampilannya, cukup tambahkan 780px untuk opsi ini.

Jangan lupa untuk mengklik tombol Save Changes setelah melakukan perubahan apa pun pada opsi Anda.

Metode 2: Secara Manual Tambahkan Sticky Floating Navigation Menu

Metode ini mengharuskan Anda untuk menambahkan kode CSS khusus ke tema Anda. Kami tidak merekomendasikannya untuk pemula.

Kami juga menyarankan Anda untuk melihat panduan kami tentang cara mudah menambahkan CSS khusus ke situs Website Anda sebelum Anda mulai.

Pertama, Anda perlu mengunjungi Appearance » Customize untuk meluncurkan penyesuai tema Website.

Selanjutnya, klik ‘additional CSS’ di panel kiri dan kemudian tambahkan kode CSS ini.

Catatan: Ini akan menghasilkan menu navigasi dengan latar belakang hitam. Jika Anda ingin warna yang berbeda, ubah nomor di sebelah latar belakang. Misalnya, menggunakan latar belakang: #ffffff akan memberi Anda latar belakang menu putih.

Cukup ganti #site-navigation dengan ID CSS menu navigasi Anda lalu klik tombol Publikasikan di bagian atas layar.

Silakan kunjungi situs web Anda untuk melihat sticky floating navigation menu Anda beraksi:

Bagaimana jika menu navigasi Anda biasanya muncul di bawah header situs, bukan di atasnya? Jika demikian, kode CSS ini dapat tumpang tindih dengan judul dan tajuk situs atau tampak terlalu dekat sebelum pengguna menggulir:

Ini dapat dengan mudah disesuaikan dengan menambahkan margin ke area header Anda menggunakan beberapa kode CSS tambahan:

Ganti branding situs dengan kelas CSS dari area header Anda. Sekarang, sticky floating navigation menu tidak akan lagi tumpang tindih dengan header Anda sebelum pengguna menggulir ke bawah:

Kami harap artikel ini membantu Anda menambahkan sticky floating navigation menu ke situs Website Anda. Untuk lebih jelasnya lagi kunjungi tutorial lengkap kami di Channel Drag and Drop berikut:

Cara Membuat Sticky Scrol / Sticky Sidebar Elementor Pro

Selamat Mencoba!