Skip to main content
KOMPI AJAIB

follow us

Mau memiliki tema blog seperti tema blog Kompi Ajaib ini? Silahkan baca postingan ini ➜ Template Kompi Ajaib AMP V3
Tambahkan aplikasi Kompi Ajaib di smartphone tanpa install, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

×

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.

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