Membuat Sticky Header Tema Astra Versi Gratis dengan Kode CSS

0

Sticky header tema astra versi gratis
Ilustrasi membuat sticky header tema astra versi gratis. Foto: Lukas/Pexels

Astra adalah salah satu tema Wordpress gratis terpopuler saat ini karena selain ringan, tema ini juga memberikan tambahan fitur gratis. Namun, pengaturan Sticky header hanya dimiliki versi premium atau berbayar. Bagaimana membuat sticky header tema Astra gratis?

Caranya adalah dengan menggunakan kode CSS yang dapat ditempatkan di space custom css pada dashboard Wordpress tema ini.

Kamu yang sedang membaca artikel ini barangkali adalah pengguna tema Astra versi gratis. Tema yang ringan, eye-cathing, dan pengaturannya yang mudah, mungkin jadi tidak lengkap tanpa sticky header.

Dengan mengaktifkan sticky header, maka bagian header menu akan tetap muncul saat kamu scroll website ke bawah. Bahkan, ini juga berlaku untuk tampilan mobile.

Baca Juga: Cara Cek Tema Wordpress dan Plugin di Website Orang Lain

Kode CSS untuk Membuat Sticky Header Tema Astra Versi Gratis

Menempatkan kode CSS di menu custom CSS pada dashboard kustomisasi adalah cara yang ampuh untuk menambahkan sticky header ke Astra.

Berikut ini kode CSS yang dapat kamu gunakan.

/*Make Header Sticky*/

.site-header {

    position: fixed;

    top: 0;

    width: 100%;

}


/*Adjust Content Padding*/

.site-content {

    padding-top: 170px;

}


/*Adjust Content Padding for Mobile*/

@media (max-width: 800px) {

    .site-content {

        padding-top: 100px;

    }

/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/

.main-navigation {

position: fixed;

margin-top: 0px;

}

}


/*Adjust Content Padding for Mobile*/

@media (max-width: 650px) {

    .site-content {

        padding-top: 150px;

    }

/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/

.main-navigation {

position: fixed;

margin-top: 60px;

}

} (code-box)

Silahkan copy kode tersebut dan paste ke custom CSS lalu lihat hasilnya. Untuk margin dan padding silahkan menyesuaikan dengan tampilan website.

Posting Komentar

0Komentar
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Posting Komentar (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !