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.

Baca : Cara Membuat Menu Responsif Fullscreen di WordPress

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:

<nav id="site-navigation" class="main-navigation" role="navigation">

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.