Cara Membuat Menu Sticky Floating di WordPress

Apakah Anda ingin menambahkan atau ingin membuat menu sticky floating (mengambang lengket) pada situs Anda?

Menu navigasi Sticky tetap berada di layar saat pengguna menggulir ke bawah halaman. Ini membuat menu navigasi teratas selalu terlihat, yang bagus untuk pengalaman pengguna karena berisi link ke bagian terpenting dari Website Anda.

Pada artikel ini, saya akan menunjukkan kepada Anda cara membuat menu navigasi sticky floating di WordPress.

Membuat menu navigasi mengambang lengket di WordPress

Apa itu Menu Navigasi Sticky Floating?

Menu navigasi Sticky atau floating adalah menu yang ‘stickys’ di bagian atas layar saat pengguna menggulir ke bawah. Ini membuat menu Anda terlihat oleh pengguna setiap saat.

Berikut adalah cara kerja menu sticky. Saya akan menunjukkan kepada Anda cara membuat menu navigasi yang persis seperti ini untuk situs Anda sendiri:

Menu navigasi tempel beraksi di situs web demo kami

Mengapa dan kapan menu navigasi Sticky bisa bermanfaat?

Biasanya, menu navigasi atas berisi link ke bagian terpenting dari sebuah website. Menu floating membuat link tersebut selalu terlihat, sehingga pengguna tidak perlu menggulir kembali ke atas. Itu juga terbukti meningkatkan konversi.

Jika Anda menjalankan toko online , menu navigasi atas Anda kemungkinan besar menyertakan link ke keranjang, kategori produk, dan pencarian produk. Membuat menu navigasi Sticky Floating, dapat membantu Anda mengurangi pengabaian keranjang dan meningkatkan penjualan.

Beberapa tema WordPress terbaik memiliki dukungan bawaan untuk menu navigasi Sticky Floating, Cukup lihat pengaturan tema Anda di bawah Tema > Sesuaikan untuk mengaktifkan fitur ini.

Jika tema Anda tidak memiliki opsi ini, teruslah membaca, dan saya akan menunjukkan cara mudah membuat menu navigasi Sticky Floating di tema WordPress atau toko WooCommerce mana pun.

Metode 1: Buat Menu Navigasi Sticky Floating Anda Menggunakan Plugin

Ini adalah cara termudah. Saya merekomendasikannya untuk semua pengguna WordPress, terutama untuk pemula.

Jika Anda belum mengatur menu navigasi Anda, lanjutkan dan lakukan itu menggunakan petunjuk tentang cara menambahkan navigasi menu di WordPress .

Setelah itu, Anda perlu menginstal dan mengaktifkan Menu Lengket (atau Apa pun!) Di plugin Gulir . Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang langkah memasang plugin WordPress .

Setelah aktivasi, Anda perlu mengunjungi halaman Settings  > Sticky Menu (atau Anything!) Untuk mengkonfigurasi pengaturan plugin.

Halaman pengaturan plugin Sticky Menu

Pertama, Anda perlu memasukkan ID CSS dari menu navigasi yang ingin Anda jadikan Sticky.

Anda perlu menggunakan alat inspeksi browser Anda untuk menemukan ID CSS yang digunakan oleh menu Anda.

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

Memeriksa elemen menu navigasi di situs Anda

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

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

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

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

Menemukan ID menu navigasi menggunakan alat inspeksi

Dalam hal ini, ID CSS navigasi menu saya adalah site-navigation.

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

Memasukkan ID elemen yang ingin Anda jadikan sticky (dalam hal ini, menu navigasi)

Jangan lupa untuk mengklik tombol Simpan Perubahan di bagian bawah halaman.

Sekarang, lanjutkan dan lihat menu sticky Anda langsung di situs WordPress Anda . Itu harus tetap di halaman saat Anda menggulir ke bawah, seperti ini:

Melihat menu tempel di situs web Anda

Opsi berikutnya pada halaman pengaturan plugin adalah menentukan ruang antara bagian atas layar Anda dan menu navigasi Sticky. 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 samping opsi: Periksa Bilah Admin . Ini memungkinkan plugin menambahkan beberapa ruang untuk bilah admin WordPress , yang hanya dapat dilihat oleh pengguna yang masuk.

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

Bilah admin WordPress muncul di atas menu tempel

Opsi berikutnya memungkinkan Anda melepaskan menu navigasi jika pengguna mengunjungi website Anda menggunakan layar yang lebih kecil seperti perangkat seluler:

Plugin menu lengket juga menawarkan opsi lebih lanjut

Anda dapat menguji bagaimana situs Anda terlihat 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 pada pilihan Anda.

Metode 2: Membuat Menu Navigasi Sticky Floating secara Manual di WordPress

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

Saya juga menyarankan Anda untuk melihat panduan tentang langkah mudah menambahkan CSS khusus ke situs WordPress Anda sebelum Anda memulai.

Pertama, Anda perlu mengunjungi Appearance > Customize untuk meluncurkan penyesuai tema WordPress.

Menambahkan CSS khusus di tema WordPress

Selanjutnya, klik CSS Tambahan di panel kiri dan kemudian tambahkan kode CSS ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Catatan: Ini akan menghasilkan  menu navigasi dengan background hitam. Jika Anda menginginkan warna yang berbeda, ubah nomor di sebelahnya background. Misalnya, menggunakan background: #ffffffakan memberi Anda Background menu putih.

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

Silakan dan kunjungi website Anda untuk melihat menu navigasi Sticky Floating yang anda buat sedang beraksi:

Menu navigasi lengket / mengambang yang dibuat menggunakan CSS

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

Menu navigasi tempel sedikit tumpang tindih dengan judul situs

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

1
2
3
.site-branding {
margin-top:60px !important;
}

Ganti site-brandingdengan kelas CSS di area header Anda. Sekarang, menu navigasi Sticky tidak lagi tumpang tindih dengan header Anda sebelum pengguna menggulir ke bawah:

Sekarang ada ruang untuk judul di bawah menu navigasi tempel

Saya harap artikel ini membantu Anda membuat menu navigasi Sticky Floating di WordPress.

Achyar

Panduan Blog

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.