Cara Membuat Modifikasi Menu Header Template VioMagz Menjadi tidak Sticky dengan CSS

Fitur menarik dari template VioMagz adalah terdapat pada bagian header dan sidebar, yaitu menampilkan menu dan widget style sticky (floating) sebagai pembeda dari templete-templates sebelumnya, kini Tema blogger rancangan MasSuggeng ini memiliki tampilannya lebih stylish namun tetap responsive.

Dilihat dari segi gaya static sticky ini merupakan trend terbaru yang dipakai oleh templete premium dan default blogger 2017 seperti Contempo, Soho, Emporio dan Terkemuka, paling nyata dipakai pada menu navigasi, bertujuan agar pembaca mudah mencari informasi yang disediakan pada menu navigasi tanpa harus kembali keatas.

Perlu dijelaskan apasih pengertian Sticky itu?

Bagi sobat blogger yang pernah melihat demo atau membaca artikel dengan tema VioMagz pasti sudah tahu bagaimana mantap dan enaknya bernavigasi dengan sticky (fixed methods) yaitu menampilkan menu atau widget menempel atau melayang fixed otomatis tetap saat di scroll naik-turun.

Metode style ini ternyata bisa di nonaktifkan alias menjadi tidak Sticky oleh sendiri.



Memang kalau urusan modifikasi templete tidak ada puasnya bisa saja anda ingin merubah tampilan sticky fixed ke absolute.

Bagi sobat blogger yang belum pernah melihat Template VioMagz silahkan bisa lihat dulu DEMO | BELI VIOMAGZ di situs resmi.

Menonaktifkan Fitur Menu Header Sticky VioMagz

Nah, bagi sobat blogger yang telah melihat demo ataupun sudah memakai, lalu ingin coba merubah atau kurang menyukai fitur header bergaya Sticky VioMagz supaya tidak Sticky sangat gampang caranya telah dibagikan oleh MasSuggeng.

Silahkan ikuti cara mengatur header templete VioMagz agar menjadi absolute secara pelan-pelan...

Langkah Menonaktifkan VioMagz agar tidak Sticky

1. Silahkan sobat login ke blogger yang menggunakan template VioMagz.

2. Masuk pada menu Tema selanjutnya Klik Edit HTML.

3. Kemudian cari kode CSS berikut pada tab HTML tema.

#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; }

Jika audah ditemukan, hapus kode tersebut dan ganti dengan kode berikut ini:

#header-container { background: $(header.background.kiri); background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan)); -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: absolute; width: 100%; z-index: 999; left:0; top:0; right:0; }

Kode bersumber dari:
https://sugeng.id/membuat-header-viomagz-tidak-sticky/

4. Kalau sudah, silahkan klik Simpan Tema.

Catatan!

Sebelum sobat mengedit template blogger tak ada salahnya untuk membackup tema tersebut guna mencegah terjadinya kesalahan.

Kesimpulan Anda Memutuskan untuk Modifikasi Templete

Untuk Templete VioMagz yang masih belum di setting oleh sendiri tampak Sticky sebenarnya fitur ini sangat simpel bagian header menjadi rapi.

Namun desainer tidak melarang jika ingin mencoba desain sendiri karena sudah dibeli. Jika menurut saya Tema ini sudah sangat baik dan responsive tidak perlu dimodifikasi secara besar.

Bagaimana Anda masih tetap ingin modifikasi VioMagz? Semua anda yang tentukan.

Fitur Penting lain di templete VioMagz:

Cara Menampilkan Kotak Subscribe VioMagz