Navwalker not inserting after first depth

Question

So I’m having some issues and I can’t figure out how to solve them, I’ve recently started working with WordPress navwalkers and I’m stuck on a particular piece and I can’t figure out how to get around it.

So I am using the Bulma Framework inside a wordpress theme.

Here is what I’m attempting to achieve (Please give me criticism if you have any, I’m still learning) – I just can’t figure out how to add in an extra div to wrap after the first $depth:

enter image description here

Here is my wp_nav_menu header:

<div class="container">
            <div class="navbar-menu is-active">
                    <div class="navbar-start" id="main-navigation">
                        <?php
                        wp_nav_menu( [
                            'theme_location' => 'primary',
                            'depth' => 3,
                            'container' => true,
                            'items_wrap' => '%3$s', // Removes the <ul>
                            'walker' => new Nav_walker(),
                        ]);
                        ?>
                    </div>

                <div class="navbar-end">
                    <div class="navbar-item">
                        <figure class="image is-48x48">
                            <img class="is-rounded" src="<?php if (is_user_logged_in()) {
                                $current_user = wp_get_current_user();
                                if (($current_user instanceof WP_User)) {
                                    echo get_avatar_url($current_user->ID, 32);
                                }
                            } ?>" alt="profile picture">
                        </figure>
                        <div class="pl-2"><?= $user->get_user_login(); ?></div>
                    </div>
                </div>
            </div>
        </div>

Here is the navwalker code:

class Nav_walker extends Walker_Nav_Menu {

    public function start_lvl(&$output, $depth = 0, $args = []) {

        // Indent the items
        $indent = str_repeat("t", $depth);

        // The first <div> inside mega-menu
        if ($depth == 0) {
            $output .= "<div class="navbar-dropdown">";
        } else {
            $output .= "<div id="test">";
        }
    }

    public function start_el(&$output, $item, $depth = 0, $args = [], $id = 0) {

        $all_classes = implode(' ', $item->classes); // turn the WP classes object array to string values

        if ($depth == 1) {
            $liClasses = 'navbar-item column is-3' . $all_classes; // add the values to your classes list
        } else {
            $liClasses = 'navbar-item ' . $all_classes;
        }

        // If menu it has children
        $hasChildren = $args->walker->has_children;

        if ($depth === 0) {
            $liClasses .= $hasChildren ? " has-dropdown is-hoverable": "";
        }

        if ($hasChildren) {
            $output .= "<div class='" . $liClasses . "'>";

            if ($depth === 0) {
                $output .= "<div class='navbar-link'>" . $item->title . "</div>";
            } else {
                $output .= "<h1 class='title is-6 is-mega-menu-title'>" . $item->title . "</h1>";
            }
        }
        else {
            $output .= "<a class='navbar-item' href='" . $item->url . "'>" . $item->title;
        }

        // Adds has_children class to the item so end_el can determine if the current element has children
        if ($hasChildren) {
            $item->classes[] = 'has_children';
        }
    }

    public function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0 ){

        if (in_array("has_children", $item->classes)) {
            $output .= "</div>";
        }
        $output .= "</a>";
    }

    public function end_lvl (&$output, $depth = 0, $args = array()) {

        $output .= "</div>";
    }
}
0
Sem 4 months 0 Answers 14 views 0

Leave an answer