Trik Mengatasi Heading Target Tertutup Sticky

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/19/2017

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.