Menu Melayang Menutupi Tampilan HP? Pelajari Cara Edit & Atur Posisi Navigasi Mobile Menu!

📌 Apa itu Mobile Menu Navigation?

Mobile Menu Navigation (bilah menu melayang HP) adalah komponen navigasi khusus yang umumnya diletakkan menempel di bagian bawah (bottom sticky navigation) atau atas layar ponsel. Modul ini dibuat khusus untuk mempermudah tamu menjelajahi seksi undangan digital hanya menggunakan satu ketukan jempol mereka saat memegang ponsel.

📖

Skenario Penggunaan Nyata

Bayangkan tamu membuka undangan Anda di HP dengan ukuran layar 5 inci. Jika menu navigasi melayang yang Anda pasang berukuran terlalu tebal dan memiliki warna background yang solid pekat, maka area baca teks undangan akan menjadi sangat sempit. Memilih ukuran ikon yang ringkas, menyetel background transparan (glassmorphism), dan mengaktifkan fitur sembunyikan di desktop adalah kunci navigasi mobile yang premium.

Langkah 1: Menyeleksi Widget Mobile Menu

Buka editor Elementor Anda, aktifkan mode responsif ke layar **Mobile**. Klik kanan widget menu navigasi melayang (biasanya di bagian paling bawah halaman) lalu klik **Edit Widget**.

Langkah 2: Mengatur List Menu & Anchor Link

Di bawah panel pengaturan sebelah kiri, kelola item menu. Ganti ikon yang mewakili setiap seksi (misal: ikon rumah untuk beranda, ikon kalender untuk acara, ikon kamera untuk galeri) dan pasang tautan anchor-nya (contoh: #mempelai, #acara, #galeri).

Langkah 3: Menyesuaikan Ukuran & Ruang Safe Area

Buka tab **Style**. Atur tinggi bar navigasi agar tidak terlalu tinggi (disarankan antara 55px s.d. 65px), sesuaikan ukuran ikon (18px - 22px), dan atur offset bawah (bottom offset) untuk mengantisipasi bilah navigasi browser Safari bawaan iOS.

Langkah 4: Menonton Video Tutorial Detail

Ikuti demonstrasi visual cara mengedit item menu, mengganti warna background, serta trik menyembunyikan menu navigasi mobile saat undangan dibuka di komputer:

💡

Pro Tips Visibilitas Perangkat

Jangan biarkan menu melayang ponsel ini muncul ketika website dibuka menggunakan komputer desktop atau laptop karena akan terlihat sangat aneh di layar lebar. Selalu masuk ke tab **Advanced > Responsive** pada widget ini, lalu aktifkan opsi **Hide on Desktop** dan **Hide on Tablet**.

🔗 Modul Panduan Terkait

Langkah berikutnya adalah cara menyisipkan file animasi dan musik latar belakang:

💡 Pertanyaan Sering Ditanya (FAQ)

Mengapa ikon menu navigasi melayang saya berubah menjadi kotak kosong (broken)?

Hal ini disebabkan pustaka FontAwesome belum terisi atau terblokir di pengaturan Elementor. Solusinya, masuk ke dashboard WordPress Anda > **Elementor > Settings > Advanced**, lalu aktifkan opsi **Load Font Awesome 4 Support** ke posisi Yes.

Bagaimana cara membuat latar belakang menu navigasi menjadi buram transparan?

Di tab Style, atur warna background menu menggunakan format RGBA dengan tingkat opacity rendah (contoh: rgba(255, 255, 255, 0.7)) lalu tambahkan properti CSS filter backdrop-blur pada pengaturan CSS kustom widget.

Dapatkah saya mengganti tulisan label di bawah ikon menu?

Ya. Di panel pengaturan list item menu, isi kolom teks label sesuai bahasa yang Anda inginkan (misal: Home, Acara, Gallery, Buku Tamu) atau Anda bisa menghapusnya sama sekali jika ingin tampilan hanya berupa ikon minimalis.