- Create a Primary Menu, (rename to "primary" and tick the checkbox)
- place navwalker.php in your WordPress theme folder /wp-content/your-theme/
- To use Bulma-navwalker add these lines to your functions.php
require_once('navwalker.php');
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'primary' ),
) );
- Copy this to your header
<div>
<nav class="navbar container" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://github.com/Poruno/Bulma-Navwalker">
<img class="brand-image" src="https://avatars1.githubusercontent.com/u/14240204?s=400&u=8ad776c75e4693d55ced68f8573c5a18ac054fca&v=4"/>
</a>
<button class="button navbar-burger" data-target="primary-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 0,
'container' => false,
// 'items_wrap' => 'div',
'menu_class' => 'navbar-menu',
'menu_id' => 'primary-menu',
'after' => "</div>",
'walker' => new Navwalker())
);
?>
</nav>
</div>
- To make the nav-burgers work add this to the end of the body
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
You can thank me by connecting with me in LinkedIn! https://www.linkedin.com/in/carlooperio/
- Error: in_array(Line 49) occurs when first step is skipped. I've realized that I have not included that part in this readme.