Skip to main content

Trik Mengatasi Heading Target Tertutup Sticky

Trik ini sebenarnya berguna jika postingan Anda menggunakan table of content dan menggunakan header atau navigasi sticky sehingga ketika pengunjung mengklik list table content maka ketika menuju kontennya, heading konten tidak tertutup sticky.

Kalau bingung, silahkan coba langsung biar lebih mengerti. Silahkan masuk halaman ini lalu scroll dulu halamannya sampai tampak menu sticky. Kemudian silahkan klik sub menu pada menu Shortcodes.

Bagaimana, sudah mengerti bukan? Nah jika kebetulan Anda mengalami masalah heading target tertutupi sticky, Anda bisa mencoba trik berikut ini.

Silahkan tambahkan CSS di bawah ini.


:target::before {
   content: "";
   display: block;
   height: 70px;
   margin-top: -70px;
   visibility: hidden
}

Silahkan sesuaikan nilai height: 70px; lebih tinggi dari tinggi sticky blog Anda. Nilai margin-top adalah minus dari height.

Bagaimana, mudah bukan?

Selamat mencoba, semoga bermanfaat.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB