Bawaan header template median ui 1.6 ini memang tidak sticky, kalian bisa mengetahuinya ketika kalian scroll ke atas atau ke bawah maka bagian header akan menghilang di versi dekstop maupun versi mobile.
Sticky header
Sticky header adalah header yang selalu muncul ketika kalian scroll ke bawah maupun ke atas dan selalu tampil di bagian postingan dan halaman manapun, sehingga identitas seperti nama blog/web, slogan, logo, deskripsi, dan icon yang di atas tetap terlihat di halaman maupun postingan manapun.
Untuk merubah header median ui 1.6 menjadi sticky caranya sangat mudah, kalian hanya merubah sedikit pada bagian CSSnya saja. Sebelum lanjut ke tutorial saya akan jelaskan bahwa css di median ui 1.5 dan median ui 1.6 itu berbeda.
Untuk demonya coba kalian lihat template ini, karena template ini sudah saya setting sticky.
Cara Membuat Sticky Header Pada Template Median UI 1.6
- Silahkan kalian login ke blog kalian dan pilih tema lalu edit html
- Cari kode /* Remove this to keep header floating */
- Jika sudah ketemu maka akan menemukan kode seperti di bawah ini
/* Remove this to keep header floating */ header{position:relative;border:0} .headL{padding:0 0 0 15px;flex-grow:1;width:50%} .headR{padding:0 20px 0 0;flex-grow:0} .headIc .isSrh{display:block} .headI .headS{margin:0}- Silahkan ganti kata relative dengan sticky yang saya tandai warna kuning
- Jika sudah maka hasilnya akan seperti di bawah ini
/* Remove this to keep header floating */ header{position:sticky;border:0} .headL{padding:0 0 0 15px;flex-grow:1;width:50%} .headR{padding:0 20px 0 0;flex-grow:0} .headIc .isSrh{display:block} .headI .headS{margin:0}- Simpan tema dan selesai