 |
| 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 */
.navigation-mobile{background-color:#fefefe;box-shadow:0 -10px 20px 0 rgba(30,30,30,.05);bottom:0}
.navigation-mobile li{visibility:visible;opacity:1}
.navigation-mobile .top-link a{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 .navigation-mobile svg{fill:$(night.colors)}
.dark-mode .navigation-mobile svg.line, .dark-mode .navigation-mobile .top-link svg.line{fill:none;stroke:$(night.colors)}
Preview
Silahkan simpan template Anda dan lihat hasilnya. Untuk contoh penerapannya bisa Anda buka postingan ini pada smartphone Anda:
