Cara membuat off canvas menu wordpress menggunakan generatepress FREE

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:

1. Ringan dan cepat: theme ini sangat ringan dan tidak akan membebani performa website Anda. Ini membuat website Anda akan lebih cepat dan responsif.
2. 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.
3. Responsif: theme ini telah disesuaikan dengan semua jenis perangkat, sehingga website Anda akan terlihat baik di komputer, tablet, atau ponsel.
4. SEO friendly: theme ini dirancang dengan SEO friendly, sehingga website Anda akan lebih mudah ditemukan oleh mesin pencari.
5. 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.
6. Harga yang terjangkau: GeneratePress dapat Anda dapatkan dengan harga yang terjangkau, dan Anda akan mendapatkan update gratis seumur hidup.
7. 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:

1. 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();
	}
}

2. 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;
}

3. 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!