Loncat ke Konten Utama

Cara membuat menu mengambang di WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 situs web atau blog di WordPress, kami mengundang Anda untuk berkonsultasi Bagaimana menginstal sebuah blog WordPress langkah 7 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 '.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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 membutuhkan penambahan kode CSS khusus ke tema WordPress Anda.

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 '.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 plugin WordPress lain yang memungkinkan Anda mengelola menu, berikut beberapa plugin WordPress premium yang didedikasikan untuk tugas ini. 

1. menu pahlawan

Plugin ini memungkinkan Anda untuk membuat menu WordPress pribadi Anda sendiri dalam beberapa langkah mudah. Ini memungkinkan Anda untuk dengan mudah dan intuitif membuat menu WordPress yang elegan dan profesional. Dari menu mega paling rumit yang penuh fitur, hingga menu paling sederhana dengan menu tarik-turun, plugin WordPress 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

8Degree Fly Menu adalah plugin WordPress premium yang memungkinkan Anda menambahkan menu kanvas di situs web Anda, untuk memberikan tampilan yang menyoroti dan memudahkan informasi Anda. Ini menggunakan fungsi menu WordPress default 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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

...  

Artikel ini berisi komentar 7

  1. Halo,

    Pertama-tama, terima kasih untuk tutorial ini yang bekerja dengan sempurna!
    Tetapi tidak peduli seberapa keras saya mencari di internet, saya tidak dapat menemukan jawaban untuk pertanyaan saya:
    Bagaimana caranya, setelah menu mengambang dibuat (dalam CSS atau dengan ekstensi apa pun), sehingga bagian saya muncul setelah menu dan bukan di belakang menu?
    Ini sangat mengganggu dalam kasus saya karena ini adalah onepage dan item menu saya oleh karena itu merujuk ke bagian halaman, yang setiap kali naik di belakang menu saya ...

    apakah itu berbicara kepada Anda?

    Merci par avance!

      1. Hello; hai

        Saya mencoba dengan tema yang diunduh (wallstreet) tetapi, saat mengikuti petunjuk Anda, tidak ada yang berubah… Saya tidak tahu apa yang hilang…
        Saya menyukainya dan saya berharap bisa menggunakannya ...

        merci
        Raul

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
5 saham
saham2
menciak
Register3