Pernahkah Anda menjelajahi situs web dan menemukan bahwa menu navigasi selalu terlihat di bagian atas?

Pada prinsipnya menu navigasi ditampilkan sedemikian rupa sehingga menghilang saat menggulir halaman. Menu navigasi yang selalu terlihat mengambang dan jadi tidak peduli bagaimana pengguna menggulir ke bawah.Cara membuat menu floating wordpress 1

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mudah membuat menu mengambang di blog WordPress Anda.

Jika Anda belum membuat website atau blog di WordPress, kami mengundang Anda untuk berkonsultasi Cara menginstal blog WordPress dalam 7 langkah kemudian, Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda

Jika sudah selesai, mari kita bahas apa yang menjadi perhatian kita hari ini.

Metode 1: Cara Menambahkan Menu Terapung di WordPress Menggunakan Plugin

Metode ini lebih mudah dan cepat. Jika Anda belum mengatur menu navigasi, Anda bisa pelajari cara melakukannya.

Plugin wordpress menu lengket

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin " Sticky Menu (atau Apapun!) Kami Gulir ". Jika Anda tidak tahu cara memasang plugin, Anda dapat membaca tutorial kami.

Setelah aktivasi, Anda harus mengunjungi " Pengaturan »Menu Sticky Untuk mengkonfigurasi pengaturan plugin ini.

Plugin wordpress menu lengket

Pertama, Anda harus memasukkan ID CSS untuk menu navigasi yang ingin Anda float.

Anda perlu menggunakan alat "inspeksi" browser Anda untuk menemukan CSS yang digunakan.

Buka situs web Anda dan gerakkan mouse Anda ke menu navigasi. Setelah itu Anda harus klik kanan dan pilih "Periksa".

Melangkah lebih jauh dengan menemukan Bagaimana untuk menyesuaikan tema WordPress dengan Yellow Pensil

Periksa kode wordpress tutorial

Ini akan membagi (secara default) layar browser Anda, dan Anda akan dapat melihat kode sumber menu navigasi Anda. Anda harus menemukan garis yang mirip dengan ini:

Dalam contoh ini, ID CSS dari menu navigasi kami adalah " Navigasi situs '.

Silakan masukkan ID CSS menu dalam pengaturan plugin sebagai berikut "# site-navigation".

Opsi selanjutnya pada pengaturan plugin adalah mengatur ruang antara bagian atas layar dan menu navigasi mengambang. Anda dapat menggunakan pengaturan ini jika menu Anda tumpang tindih dengan item yang tidak ingin Anda sembunyikan. Jika tidak, abaikan pengaturan ini.

Setelah itu Anda perlu mengklik kotak di sebelah kanan opsi: "Check Bar Admin". Ini memungkinkan plugin menambahkan beberapa ruang untuk toolbar WordPress yang ditambahkan untuk pengguna yang masuk.

Opsi berikutnya di halaman pengaturan memungkinkan Anda menyembunyikan menu navigasi jika pengguna mengunjungi situs web Anda menggunakan layar yang lebih kecil, seperti perangkat seluler.

Anda dapat menguji bagaimana menu ini ditampilkan di perangkat seluler dan tablet. Jika Anda tidak menyukainya, Anda dapat menambahkan 780px pada opsi ini.

Temukan juga Cara membuat menu responsif untuk WordPress seluler

Jangan lupa untuk mengklik " Simpan pengaturan Untuk menyimpan perubahan Anda.

Anda sekarang dapat mengunjungi situs web Anda untuk melihat menu navigasi mengambang Anda dalam aksi.

Menu wordpress mengambang

Metode 2: Cara menambahkan menu navigasi secara manual

Metode ini memerlukan penambahan kode CSS khusus ke . Anda tema WordPress.

Pertama-tama Anda harus mengunjungi " Penampilan> Sesuaikan Untuk meluncurkan Customizer WordPress.

Penyesuai wordpress css tambahan

Klik pada CSS tambahan Di panel kiri, lalu tambahkan kode CSS ini.

# Navigasi Site {background: # fff; height: 60px; z-index: 170; margin: 0 auto; border-bottom: 1px #dadada padat; width: 100%; position: fixed; top: 0; kiri: 0; kanan: 0; text-align: center; }

Ganti " # Navigasi Situs Oleh pengidentifikasi menu navigasi Anda dan klik tombol « Register '.

Anda sekarang dapat mengunjungi situs web Anda untuk melihat menu navigasi mengambang Anda dalam aksi.

Jika menu navigasi Anda biasanya muncul setelah tajuk situs web, kode CSS ini dapat tumpang tindih dengan judul dan tajuk situs web.

Ini dapat dengan mudah disesuaikan dengan menambahkan margin pada area header Anda menggunakan kode berikut:

.site-branding {margin-top: 60px; }

Di sini mengakhiri tutorial kami, sekarang Anda akan dapat membuat atau menambahkan menu mengambang di situs web Anda.

Jika Anda mencari yang lain plugin WordPress yang akan memungkinkan Anda untuk mengelola menu, berikut adalah beberapa plugin WordPress premium yang didedikasikan untuk tugas ini. 

1. menu pahlawan

Plugin ini memungkinkan Anda untuk membuat menu WordPress kustom Anda sendiri dalam beberapa langkah yang cukup mudah. Secara khusus, ini memungkinkan Anda untuk dengan mudah dan intuitif membuat menu WordPress yang elegan dan profesional. Dari mega menu kaya fitur yang paling kompleks, hingga menu drop-down paling sederhana, WordPress Plugin HeroMenu menyiapkan jenis menu apa pun dan menjalankannya dalam hitungan menit.

Pahlawan menu responsif wordpress mega menu plugin

Dalam hal fitur yang ditawarkannya antara lain: berfungsi sempurna pada PC, tablet, dan ponsel cerdas, mudah digunakan, konten yang dapat disesuaikan, CSS khusus untuk menambahkan gaya menu Anda sendiri, desainer menu mega, browser yang didukung: Chrome, Firefox, Safari , Opera, IE9, dan lainnya.

Download | Demo | Hébergement Web

2. Menu Slick

Menu Slick bukan hanya plugin menu untuk WordPress. Ini dapat digunakan untuk membuat beberapa level menu dengan cara yang tidak terbatas, serta sidebar dengan konten yang kaya, beberapa opsi gaya dan efek animasi.

Menu apik menu responsif wordpress vertikal

Setiap level menu dapat disesuaikan dengan warna latar belakang, gambar, video, font khusus, dan banyak lagi. Plugin ini sepenuhnya responsif dan memiliki lebih dari 45 animasi untuk item menu.

Download | Demo | Hébergement Web

3. 8Degree Menu Terbang

Menu Terbang 8Derajat adalah WordPress Plugin premium yang memungkinkan Anda menambahkan menu kanvas ke situs web Anda, untuk memberikan tampilan yang menyoroti informasi Anda dengan cara yang sederhana. Ini menggunakan fitur menu default WordPress untuk membuat menunya.

8degree fly menu responsif dari menu menu plugin untuk wordpress

Anda akan dapat menambahkan elemen tambahan ke item menu default, seperti ikon, slogan menu, header pseudo-grouping, dan deskripsi panjang. Ini juga dilengkapi dengan editor WYSIWYG untuk membantu Anda memahami deskripsi panjang Anda dengan cara yang ramah pengguna. Dengan editor ini Anda juga dapat menggunakan kode pendek.

Download | Demo | Hébergement Web

Sumber daya lain yang direkomendasikan

Jika Anda ingin melangkah lebih jauh dalam membuat atau menyesuaikan menu blog atau situs web Anda, kami juga menyarankan Anda untuk berkonsultasi dengan tautan di bawah ini.

Kesimpulan

Sini! Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda menambahkan menu mengambang di blog WordPress Anda. Kami mengundang Anda untuk bagikan artikel ini dengan teman-teman Anda di jejaring sosial Anda.

Jika Anda memiliki saran atau komentar, mereka akan diterima. Dan jika Anda baru mengenal WordPress, konsultasikan ini sumber.

...