Step by Step Mengubah/Menghapus Navigasi Mobile pada Template Median UI

Perhatian: Kode CSS pada versi sebelumnya mungkin sedikit berbeda artikel ini diupdate agar sesuai dengan pembaruan terbaru

Source: jagodesain.com

Tampilan menu navigasi mobile dibuat untuk memudahkan user dalam mengklik menu-menu penting pada blog seperti tombol menu navigasi, tombol pencarian, tombol dark mode dan tombol lainnya

Seperti yang kita ketahui rata-rata user menggunakan smartphone menggunakan satu tangan dan jempol tangan kesulitan meraih bagian atas(header) pada sebuah laman, karena itulah menu navigasi mobile dipindah ke bagian bawah. Konsep ini juga diterapkan di beberapa aplikasi terkenal seperti Instagram, beberapa mobile browser, Pinterest, Youtube dan sebagainya

Namun untuk Anda yang kurang menyukai tampilan menu navigasi mobile yang ada pada template ini dan ingin mempertahankan header sticky pada tampilan mobile, boleh ubah dan hapus beberapa kode CSS dibawah ini agar menu navigasinya tidak tampil:

Semua kode CSS dibawah ini ada dan ditambahkan pada bagian CSS @media screen and (max-width:640px){, kode tersebut memiliki arti hanya aktif ketika lebar layar maksimal 640px

Pertama - kembalikan header sticky

Pada kumpulan kode CSS @media screen and (max-width:640px){ carilah kode dibawah ini dan ubah sesuai instruksi:

header{padding:0 20px;position:absolute}

Hapus bagian kode yang ditandai "position:absolute;" sehingga kodenya menjadi seperti ini:

header{padding:0 20px}

Kode diatas untuk mengembalikan posisi header kembali menjadi sticky, selanjutnya

Mengembalikan icon navigasi dan menambahkan icon search pada header

Pada tampilan postingan icon navigasi diubah menjadi tombol back to homepage, untuk merubahnya silahkan cari dan hapus kumpulan kode dibawah ini:

.singleItem .navicon .nav{display:none;transform: rotate(180deg);-webkit-transform: rotate(180deg)}
.singleItem .navicon .nav.home{display:block}
.singleItem .navicon .nav i:nth-child(1){width:45%;margin-left:55%;-webkit-transform:translateY(3px) rotate(40deg);transform:translateY(3px) rotate(40deg)}
.singleItem .navicon .nav i:nth-child(2){width:95%;margin-left:0%}
.singleItem .navicon .nav i:nth-child(3){width:10%;margin-left:62.5%;background-color:transparent;-webkit-transform:translateY(0px) rotate(-40deg);transform:translateY(0px) rotate(-40deg)}

Agar icon tombol search muncul silahkan ubah(replace) kode diatas dengan kode css dibawah ini:

header .navicon .navSearch{display:block}

Kedua - Sembunyikan menu navigasi mobile

Cara ini tidak menghapus permanent kode navigasi mobile namun hanya menyembunyikannya kembali saja. Cari lalu hapuslah kode dibawah ini:

/* Navigation mobile show */
.navMobile{background-color:$(nav.bg.colors);box-shadow:0 -10px 20px 0 rgba(30,30,30,.1);bottom:0}
.navMobile li{visibility:visible;opacity:1}
.navMobile .top-link > *{display:block;position:relative;right:auto;bottom:auto;width:auto;height:auto;background-color:transparent;box-shadow:none}

Kode kedua yang harus dihapus:
.dark-mode .navMobile svg{fill:$(dark.colors)}
.dark-mode .navMobile svg.line, .dark-mode .navMobile svg .line, .dark-mode .navMobile .top-link svg.line{fill:none;stroke:$(dark.colors)}

Preview

Silahkan simpan template Anda dan lihat hasilnya. Untuk contoh penerapannya bisa Anda buka postingan ini pada smartphone Anda: