Cara Membuat Header Menu Tidak Sticky di Viomagz
Salah satu kelebihan template Viomagz adalah header tempat logo dan menu navigasi blog tetap berada pada posisinya meski halaman sedang di gulir. Namun terkadang bagi sebagian pembaca fitur tersebut malah dirasa kurang baik karena menggangu kenyamanan saat membaca.
Nah dalam kesempatan kali ini, saya ingin berbagi sebuah tips blogger tentang cara membuat header menu Viomagz tidak sticky dengan mudah. Selain itu saya juga akan berbagi cara agar header tetap sticky saat ada scroll ke atas dan akan menghilang saat ada scroll ke bawah.
Cara Agar Header Menu Viomagz Tidak Sticky
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Cari CSS berikut di bawah ini!
#header-container {
background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}
Setelah ditemukan, ganti kode yang ditandai dengan warna kuning menjadi absolute
Atau seperti kode CSS di bawah ini.
#header-container {
background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;
}
Klik simpan dan lihat hasilnya.
Dengan mengganti nilai pada position pada kode CSS tersebut, maka secara otomatis fitur sticky pada header di template Viomagz tidak akan aktif.
Nah itulah cara agar header template Viomagz tidak sticky.
Semoga bermanfaat.
Posting Komentar