Menampilkan Hamburger Menu Pada Template Emporio

Banyak yang tak tahu pada tema emporio memiliki fitur hamburger menu seperti 2 template setelahnya yakni Soho dan Contempo. Namun pada emporio hamburger menu ini kosong alias tak ada apa-apanya tak seperti kedua saudaranya yang diisi oleh widget/gadget sidebar. Namun jangan khawatir sudah banyak tutorial yang mengulas cara memasukan/mengisi hamburger menu pada emporio ini. Tinggal search saja pada google.

Oleh karena itu saya tidak akan mengulas cara mengisi/memasukan menu pada hamburger menu pada tema emporio ini, melainkan cara menampilkannya agar bisa diisi navigasi.

Berawal saat mengubah ukuran browse dengan memperbesarnya (ctrl+scroll atas) saya melihat icon kecil tiga garis kecil berjajar vertical , namun ktika di perkecil ukuran browser (ctrl+scroll bawah) icon tersebut kembali hilang. Sempat saya klik tapi kosong namun sudah ada background transparant hitam. Lalu saya klik sembarang dan background hitam transparant itu kembali hilang. Lalu saya coba untuk menampilkannya, teringat salah satu blog yang sering saya kunjungi. Kalau untuk menampilkan elemen css ini cukup dengan menambahkan display:block untuk menampilkan dan display: none untuk menghilangkan/menyembunyikan. Sebagai seorang yang buta akan kode program , saya ingin menerapkan nya pada template blog yang saya kelola [bukan blog ini tentunya]

Saya masuk ke edit/HTML lalu saya coba cari hamburger sebagai keyword pada box pencarian dashboard. Lalu saya masukan dan coba pasang display:block; untuk menampilkannya. Beberapa kali salah, karena ada beberapa kode dengan selektor hamburger disana, namun akhirnya sya berhasil.

Selektor yang emprio gunakan adalah .hamburger-section, menyatu dengan .centered-top. Hamburger-section pada urutan terakhir. Kemudian saya masukan display:block; lalu saya save.

Jadi Seperti Ini

Hasilnya, hamburger menu yang saya inginkan itu muncul.

Yeaaaah....

 

 

Tapi sayangnya muncul hanya pada halaman utama saja [homepage] tapi di halaman postingan tak ada.

Wah ... gimana nih?!

Saya pelototin lagi kodenya. Ingat Tag Coditional yang saya baca beberapa waktu lalu.

Kemudian saya cari html dari hamburger-section. Kodenya seperti dibawah:

<div class='hamburger-section'>
                    <b:include data='{ iconClass: &quot;touch-icon
                    hamburger-menu&quot; }' name='menuIcon'/>
                  </div>

 

posisi tepat berada tepat dibawah kode ini:

<b:if cond='data:view.isSingleItem'>
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
</a>

Lihat gambar

Lalu ganti tag kodisionalnya yang berwarna merah agar tampil pada laman post dengan tag kodisional dibawah ini:

<b:if cond='data:view.isMultipleItem'>

Lihat gambar

Lalu di save daaann....

benar sekali... hamburger menu mucul yakni disticky header sebelah kanan setelah kotak pencarian emporio saya.

 

Akhirnya lega hati ini...

Yeahh berhasil... berhasillll...



selengkapnya disini:

hamburger menu emporio