shaunmac/Bulma-Navwalker

An extended Wordpress Navwalker object that displays Bulma framework's Navbar https://bulma.io/ in Wordpress.

Bulma Navwalker

To use

1. place navwalker.php in your WordPress theme folder /wp-content/your-theme/
2. To use Bulma-navwalker add these lines to your functions.php

require_once('navwalker.php');
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'menuname' ),
) );

3. Then add this initializer in your header (either index.php, header.php, etc...)

    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => false,
        // 'items_wrap'        => 'div',
        'menu_class'        => 'navbar-menu',
        'menu_id'           => 'primary-menu',
        'after'             => "</div>",
        'walker'            => new Navwalker())
    );

A proper navbar will look like this

<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="localhost//examplesrc"/>
            </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'             => 2,
            'container'         => false,
            // 'items_wrap'     => 'div',
            'menu_class'        => 'navbar-menu',
            'menu_id'           => 'primary-menu',
            'after'             => "</div>",
            'walker'            => new Navwalker())
        );
        ?>

    </nav>
</div>

Congratulations you are now using Bulma!

You can thank me by connecting with me in LinkedIn! https://www.linkedin.com/in/carlooperio/