KOMPI AJAIB

follow us

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.
Reactions:
Share this with short URL:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar