Cara Membuat Menu Floating Sticky di WordPress
- Edi Sumarsono
- Apr 9, 2017
- 3 min read
Cara Membuat Menu Floating Sticky di WordPress – Menu merupakan bagian penting dari sebuah website yang dibuat untuk memudahkan pengguna dalam menavigasi website dan menampilkan beberapa bagian terpenting dari website tersebut. Karena menu merupakan bagian penting maka banyak pemilik website atau pengembang tema yang membuat bagian ini lebih menarik seperti Mega menu yang dapat menampilkan banyak sub menu atau bahkan terdapat link posting terkait yang populer dan disertai gambar thumbnail, ada juga yang membuat menu selalu terlihat melayang atau lengket dibagian atas ketika halaman di scroll kebawah.
Pada artikel kali ini saya akan membahas salah satu cara untuk membuat menu website Anda menjadi lebih menarik dengan menu yang akan selalu melayang dibagian atas meskipun halaman discroll kebawah, menu yang seperti itu dinamakan Floating Sticky Menu. Banyak situs populer yang menggunakan menu dengan floating sticky seperti The Next Web.
Dengan menampilkan menu selalu lengket ini akan lebih memudahkan pengguna situs Anda untuk melakukan perpindahan navigasi yang lebih cepat karena tidak perlu melakukan scroll ke atas lagi saat ingin mengakses menu-menu website Anda. Dan berikut cara mudah membuat floating sticky menu di WordPress. Disini saya akan memberika Anda dua cara untuk membuat menu floating sticky yaitu dengan plugin dan manual.
Daftar Isi
Cara Membuat Menu Floating Sticky dengan Plugin
Cara pertama ini tentu lebih mudah bagi semua pengguna dan saya lebih menyarankan untuk menggunakan cara ini bagi pemula. Dan untuk memulainnya, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Menu Sticky (For Anything!). Dan jika Anda belum paham cara instalasi plugin di WordPress, silahkan baca artikel berikut » Panduan Lengkap Cara Install Plguin WordPress.
Setelah aktivasi, silahkan masuk pada menu Settings » Sticky Menu (For Anything!) untuk melakukan konfigurasi plugin.
Pertama Anda harus memasukkan ID CSS menu navigasi yang ingin Anda buat sticky atau melayang.
Untuk mendapatkan ID CSS Anda, silahkan menggunakan tool di browser Anda ntuk menemukan ID CSS yang digunakan oleh menu navigasi Anda. Caranya, cukup kunjungi situs web Anda dan arahkan mouse Anda ke menu navigasi. Setelah itu, Anda perlu klik kanan dan pilih Inspect Element dari menu browser Anda.
Dengan melakukan hal tersebut maka browser akan membagi layar Anda, dan Anda akan dapat melihat source code untuk menu navigasi Anda. Dan temukan baris kode seperti ini:
Dalam contoh ini, ID CSS dari menu navigasi tema diatas adalah site-navigation.
Jika sudah ketemu seperti diatas, sekarang kembali ke pengaturan plugin Menu sticky floating dan masukkan ID CSS dari menu navigasi #site-navigation.
Pilihan berikutnya pada halaman pengaturan plugin adalah untuk mendefinisikan ruang antara bagian atas layar Anda dan menu navigasi sticky. Anda dapat menggunakan pengaturan ini jika menu Anda tumpang tindih dengan elemen yang Anda tidak ingin disembunyikan. Jika tidak, maka mengabaikan pengaturan ini.
Setelah itu Anda perlu untuk mengklik kotak centang di sebelah opsi: ‘Check for Admin Bar’. Hal ini memungkinkan plugin untuk menambahkan beberapa ruang untuk admin bar WordPress yang hanya ditambahkan untuk login pengguna.
Opsi berikutnya di halaman pengaturan memungkinkan Anda unstick menu navigasi jika pengguna mengunjungi situs web Anda menggunakan layar yang lebih kecil seperti perangkat mobile.
Anda dapat menguji bagaimana tampilannya pada perangkat mobile atau tablet. Jika Anda tidak menyukainya, maka Anda dapat mengisi kolom dengan 780px pada opsi ini.
Jangan lupa untuk mengklik tombol “Save” untuk menyimpan perubahan yang sudah Anda lakukan.
Sekarang Anda dapat mengunjungi situs web Anda untuk melihat navigasi menu sticky floating Anda apakah tampil dengan baik atau tidak.
Cara Membuat Menu Floating Sticky Manual
Cara yang kedua ini mengharuskan Anda untuk menambahkan kode CSS kustom untuk tema Anda. Anda bisa menambahkan kode CSS ini pada file style.css di tema WordPress yang Anda gunakan atau lihat pada bagian Customizer.
Caranya silahkan masuk pada Appearance » Customizer untuk meluncurkan tema penyesuain.
Klik ‘Additional CSS’ di sebelah kiri dan kemudian tambahkan kode CSS ini.
Ganti #site-navigation dengan ID CSS menu navigasi Anda dan klik tombol Save & Publish.
Sekarang Anda dapat mengunjungi situs web Anda untuk melihat menu navigasi Anda menjadi floating dan melayang diatas mengikuti halaman discroll kebawah.
Jika menu navigasi Anda biasanya muncul setelah header situs, maka kode CSS ini bisa tumpang tindih judul situs dan sundulan.
Hal ini dapat dengan mudah disesuaikan dengan menambahkan marjin ke daerah header menggunakan beberapa CSS seperti ini:
Ganti class css .sites-branding dengan class CSS pada daerah header CSS tema Anda.
Kami harap artikel ini membantu Anda menjadikan menu navigasi tampil secara floating sticky atau melayang lengket dibagian atas situs WordPress Anda.
Comments