Dalam hal ini saya menggunakan Generatepress theme untuk membuat off canvas menu. Ada beberapa alasan saya menggunakan theme Generatepress untuk wordpress saya, di antaranya adalah:
- Ringan dan cepat: theme ini sangat ringan dan tidak akan membebani performa website Anda. Ini membuat website Anda akan lebih cepat dan responsif.
- Dapat disesuaikan: theme ini menyediakan banyak pilihan untuk menyesuaikan tampilan website Anda sesuai dengan keinginan Anda. Anda dapat mengubah warna, font, layout, dan masih banyak lagi.
- Responsif: theme ini telah disesuaikan dengan semua jenis perangkat, sehingga website Anda akan terlihat baik di komputer, tablet, atau ponsel.
- SEO friendly: theme ini dirancang dengan SEO friendly, sehingga website Anda akan lebih mudah ditemukan oleh mesin pencari.
- Dukungan dan dokumentasi yang baik: GeneratePress menyediakan dukungan dan dokumentasi yang lengkap, sehingga Anda dapat dengan mudah menggunakan theme ini, bahkan jika Anda masih pemula.
- Harga yang terjangkau: GeneratePress dapat Anda dapatkan dengan harga yang terjangkau, dan Anda akan mendapatkan update gratis seumur hidup.
- Dapat digunakan untuk berbagai jenis website: GeneratePress dapat digunakan untuk berbagai jenis website, seperti blog, toko online, portfolio, dan lainnya.
Baik langsung ke topiknya yaa ..
Untuk membuat off canvas menu pada theme GeneratePress, pertama-tama Anda harus memastikan bahwa Anda telah mengaktifkan fitur off canvas menu di dalam pengaturan theme Anda. Jika sudah, Anda dapat mengikuti langkah-langkah berikut:
- Buka file functions.php dari theme Anda, dan tambahkan kode berikut di bagian paling bawah file tersebut:
add_action( 'generate_after_header', 'custom_off_canvas_menu' );
function custom_off_canvas_menu() {
if ( function_exists( 'generate_off_canvas_menu' ) ) {
generate_off_canvas_menu();
}
}
- Selanjutnya, buka file style.css dari theme Anda, dan tambahkan kode CSS berikut untuk mengatur tampilan off canvas menu:
.generate-off-canvas-menu {
background-color: #333;
color: #fff;
}
.generate-off-canvas-menu a {
color: #fff;
}
.generate-off-canvas-menu ul li a:hover {
background-color: #444;
}
- Terakhir, buka file header.php dari theme Anda, dan tempatkan kode berikut di bagian yang Anda inginkan untuk menampilkan tombol untuk membuka off canvas menu:
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
<?php esc_html_e( 'Menu', 'text-domain' ); ?>
</button>
Setelah menambahkan kode tersebut, off canvas menu Anda akan muncul dan dapat dibuka dengan menekan tombol yang Anda buat di langkah 3. Semoga membantu!