Gara-Gara Tombol Hamburger Nyangkut di Tengah, Aku Sampai Begadang! 🤣

Kisah nyata seorang blogger otodidak yang harus berantem semalaman dengan CSS hanya demi memindahkan posisi tombol menu navigasi di HP.

Kalau kamu kira jadi blogger otodidak itu mulus-mulus saja, kamu salah besar 😆.Dulu Aku kira juga begitu tinggal nulis, posting, terus cuan. Ternyata, musuh terbesar seorang blogger itu bukan karena kehabisan ide, melainkan kode CSS yang tiba-tiba ngambek tanpa alasan.

Ceritanya begini. Blog ku, Cuplisotw, tampilannya sudah lumayan rapi. Bagian hero sudah nongol, slide gambar sudah jalan, dan artikel tertata dengan apik. Dengan bangga, aku buka blog tersebut lewat HP untuk mengecek tampilannya. Eh, pas lihat bagian pojok atas, aku langsung elus dada 🤣.

Tombol hamburger-nya—itu loh, tombol garis tiga buat membuka menu navigasi—posisinya malah nyangkut di tengah! Harusnya kan dia nempel di pojok kanan atas, gagah bak satpam di depan gerbang. Ini malah nyasar di tengah-tengah, seperti anak baru yang bingung mau duduk di sebelah mana 😂. Logo cuplisotw ada di kiri, tombolnya di tengah, sementara sisi kanannya kosong melompong. Rasanya seperti melihat orang pakai baju terbalik; bikin senyum-senyum sendiri tapi gemas karena tidak bisa dibiarkan.

Sebagai manusia ngengkel sejati, jurus pertama yang aku andalkan tentu saja: panik sejenak padahal udaha bertahun-tahun masih sering bingung ngadepin eror seperti ini, lalu buka Google. Aku ketik kata kunci, "cara benerin hamburger ke tengah". Yang muncul malah resep tutorial burger sungguhan yang bisa dimakan... Oalah... 😭🤣.

Akhirnya seperti biasanya aku nekat masuk ke menu Tema > Edit HTML. Di sanalah aku berjumpa dengan musuh utama: barisan kode yang panjangnya mirip gerbong kereta api. Aku coba tekan tombol Ctrl + F, mencari kode navbar-toggler. Tidak ketemu! Aku cari kata hamburger, tidak ketemu juga! Ketik toggler, hasilnya tetap nihil. Di titik itu aku baru sadar, ternyata template blog ini mengandalkan framework Bootstrap hasil modif sendiri ada yang ketinggalan dan ternyata aku tidak tau jenisnya wkkkk...., jadi tombolnya ibarat anak kos yang numpang di rumah orang, tidak punya kamar sendiri di file kustom 😅.

Ya sudah, kalau tidak ada CSS aslinya, aku buat aja kode baru. Prinsip dasar anak otodidak: kalau tidak ada, buat sendiri. Kalau rusak, perbaiki lagi. Kalau masih rusak juga, tinggal pura-pura tidak melihat sambil bikin secangkir kopi ☕😆.

Aku tempelkan kode CSS pertama dengan penuh rasa percaya diri:

/* FIX TOMBOL HAMBURGER KE KANAN - JANGAN NAKAL LAGI YA */
.navbar-toggler {
  margin-left: auto !important;
  position: absolute !important;
  right: 15px !important;
}

Aku simpan, refresh halaman, dan... JEDER! Tombolnya memang pindah ke kanan. Aku sempat mau berdansa gembira. Tapi saat tombolnya aku klik, hah?! Menunya malah muncul menumpuk di tengah layar, menutupi seluruh konten utama 🤣. Menu Home, Informasi, Motivasi, dan Sepak Bola berkumpul di tengah bagaikan mahasiswa yang sedang berdemo. Diklik sekali lagi tidak mau menutup, di-refresh pun tetap bandel nongol di situ. Di situlah mental otodidak ku benar-benar diuji lagi. Mau menangis, tapi malu sama kucing piaraan 🐱😂.

Ternyata masalahnya terletak pada perintah display: flex !important yang kupaksa masuk ke dalam menu. Akibatnya, menu tersebut dipaksa tampil terus-menerus, bagaikan mantan yang gagal move on. Padahal, harusnya menu itu bersembunyi dulu, dan hanya muncul ketika tombolnya diklik.

Dari kejadian itu, aku baru nyadar meski seing terulang karena lupa kali ya.., di dunia CSS ada yang namanya perintah display: none untuk menyembunyikan elemen, dan display: block yang aktif jika ada tambahan kelas .show. Rumusnya sederhana: sembunyi dulu, baru muncul kalau dipanggil jangan malah ikut nongol.. 😆.

Kedua, kita tidak boleh menyamakan aturan CSS di layar HP dan laptop. Di laptop, menu harusnya tampil berjajar horizontal di sebelah kanan, sedangkan tombol hamburger-nya disembunyikan. Di HP, kondisinya justru terbalik. Oleh karena itu, kita harus memakai jurus pamungkas anak otodidak: @media (max-width: 991px). Artinya kurang lebih begini, "Eh CSS, kode yang ada di dalam kurung ini hanya berlaku untuk layar HP saja ya, jangan sok ikut campur urusan tampilan di laptop!" 🤣

Setelah kupisah pengaturannya, aku terapkan kode final yang benar seperti ini:

/* HP SAJA - Jangan ikut campur urusan laptop! */
@media (max-width: 991px) {
  .navbar-toggler {
    display: block !important; /* Munculkan kembali, jangan ngumpet */
    margin-left: auto !important; /* Geser ke kanan, jangan di tengah */
  }
  .navbar-collapse {
    display: none !important; /* Sembunyikan dulu */
  }
  .navbar-collapse.show {
    display: block !important; /* Nah, baru nongol kalau diklik */
  }
}

Aku klik simpan perubahan, lalu segarkan halaman browser dengan menekan Ctrl + Shift + R agar cachenya ikut bersih. Dan... BERHASIL! Di layar laptop, menu tampil rapi di sebelah kanan. Di layar HP, tombol hamburger anteng di pojok kanan, dan saat diklik, menunya langsung turun ke bawah dengan tertib secara vertikal tanpa menumpuk lagi 🎉 kalo udah gini google bakal ngelirik lagi deh layak gak di pajanag di halamanya 😂

Sekarang blog ku sudah kembali rapi. Tombol hamburger sudah bertobat dan tidak lagi nyasar ke tengah. Tinggal aku saja nih yang belum bertobat dari kebiasaan begadang malam 😆.

Bagaimana, kamu juga pernah mengalami insiden tombol nyasar seperti ini? Coba ceritakan pengalaman kocakmu di kolom komentar, biar kita bisa nangis berasma-sama ! 🤣

Ditulis oleh

Owner ABM Garage

Berbagi Informasi, Tips & Hal Bermanfaat — abmgarage.com