Jadikan hujan

Menu navigasi mengambang yang lengket tetap berada di atas layar saat pengguna menggulir halaman ke bawah. Beberapa tema WordPress memiliki fitur ini bawaan, sebagai opsi dalam pengaturannya.

Tetapi jika tema Anda tidak miliki fitur keren ini, jangan khawatir, ada solusinya.

Anda memiliki opsi untuk memasukkan sedikit pengkodean ke situs Anda yang akan membuat menu tetap ditempatkan di bagian atas jendela, agar pengguna Anda dapat mengaksesnya setiap saat.

Mengapa & kapan menu navigasi mengambang yang lengket berguna

Biasanya, menu navigasi utama berada di bagian atas situs dan berisi tautan ke halaman utama — jika tidak semua — situs Anda. Menu navigasi mengambang yang lengket membuat tautan tersebut dapat diakses setiap saat, yang membuat orang tidak perlu menggulir kembali ke atas untuk mengakses bagian lain dari situs.

Memiliki menu yang lengket terbukti meningkatkan konversi. Membuatnya hujan, seolah-olah.

Jika Anda kebetulan memiliki toko online, maka menu navigasi teratas Anda akan memiliki tautan ke kategori produk, keranjang, dan fitur pencarian produk. Jika Anda menggunakan menu lengket, ini akan membantu Anda menurunkan pengabaian keranjang dan mungkin dapat meningkatkan penjualan Anda! (Sekali lagi, membuat hujan.)

Beberapa tema WordPress berbayar memiliki pengkodean bawaan untuk menu navigasi mengambang yang lengket. Untuk memeriksa apakah tema Anda memiliki opsi ini, buka Tema > Sesuaikan untuk mengaktifkannya. Jika tema Anda tidak memiliki menu lengket bawaan, maka Anda akan ingin menyingsingkan lengan baju Anda dan melakukan sedikit pengkodean.

Namun jangan khawatir, cara mengatasinya tidak terlalu sulit.

Mengkodekan menu navigasi mengambang lengket Anda

Sebelum melakukan hard coding ke situs Anda yang berharga, pastikan untuk selalu pertama buat cadangan situs dan selalu kode pada Anda tema anakbukan kamu tema orang tua.

Sekarang, untuk menambahkan kode yang diperlukan untuk mengaktifkan menu lengket mewah Anda, Anda dapat pergi ke Penampilan > Sesuaikan untuk meluncurkan penyesuai tema WordPress. Sekarang klik CSS tambahan dari menu sebelah kiri dan tambahkan kode CSS ini:

#site-navigation 

background:#000000;

height:60px;

z-index:170;

margin:0 auto;

border-bottom:1px solid #ffffff;

width:100%;

position:fixed;

top:0;

left:0;

right:0;

text-align: center;



Ini akan membuat menu navigasi dengan latar belakang hitam. Jika Anda membutuhkan warna yang berbeda, ubah nomor di sebelah latar belakang, seperti #takut, Misalnya. Juga, pastikan untuk mengganti #navigasi situs dengan ID CSS dari menu navigasi Anda saat ini dan pilih Menerbitkan tombol di atas dari layar.

Catatan: Anda dapat menemukan ID CSS dengan membuka jendela inspektur di browser favorit Anda. Segarkan situs Anda dan lihat kesejukan apa yang telah Anda buat. Pengkodean ini hanyalah salah satu contoh. Ada semua jenis penyesuaian yang dapat Anda lakukan. Desain sesuka hati Anda.

“Ini bagus dan keren, tapi menu saya biasanya ditampilkan di bawah header situs, bukan di atasnya.”

Jika demikian, kode CSS baru ini dapat tumpang tindih dengan judul dan tajuk situs atau muncul terlalu dekat sebelum pengguna menggulir. Perbaikan sederhana! Anda hanya perlu menambahkan margin ke area header Anda menggunakan beberapa kode CSS tambahan:

.site-brand 

margin-top:60px !important;



Mengganti situs-merek dengan kelas CSS dari area header Anda. Sekarang, menu navigasi lengket tidak akan mengganggu header Anda sebelum pengguna menggulir ke bawah.

Menutup pikiran

Pengkodean bisa menyenangkan, tetapi selalu ingat untuk mengedit tema anak Anda, bukan tema induk. (Seperti disebutkan di atas.) Dan buat cadangan situs Anda! Jika tidak, jika Anda merusak semuanya, Anda mungkin kurang beruntung, dan ketika tema Anda diperbarui, semua pengkodean Anda bisa hilang seperti pasir waktu.