Dropdown Toggle Split in Bootstrap Navwalker Wordpress

Question

It's about Wordpress Theme Development.

When working on a WordPress theme using Bootstrap 5, I used Bootstrap NavWalker to create a navigation bar (navbar). The dropdown feature is already built into Bootstrap NavWalker, including the dropdown arrow integrated into the menu.

Now, I want to customize it a bit. I want the text in the menu to take the user to a link when clicked. However, when the user clicks on the dropdown arrow, I want it to reveal the submenu instead.

In summary, I want the user to navigate to a link by clicking on the menu text, and show the submenu when the dropdown arrow is clicked. Is it possible to do that? here is my code:

header.php:

 <div class="col-12">
                                <nav class="main-menu navbar navbar-expand-md navbar-light bg-light">
                                    <button class="navbar-toggler ms-auto mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                        <?php
                                        wp_nav_menu(array(
                                            'theme_location'  => 'kreasi_main_menu',
                                            'depth'           => 4, 
                                            'container'       => false,
                                            'menu_class'      => 'navbar-nav me-auto mb-2 mb-lg-0',
                                            'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
                                            'walker'          => new WP_Bootstrap_Navwalker(),
                                        ));
                                        ?>
                                    </div>
                                </nav>
                            </div>

this is my script-navbar.js, i'm using node.js:

import $ from 'jquery';

class scriptNavbar {
    constructor() {
        this.events();
    }

    events() {
        $(document).ready(() => {
            // Toggle dropdown-menu on click
            $('.main-menu .dropdown > a').on('click', function (e) {
                e.preventDefault();
                // Close other dropdown-menus within the same level
                $(this).parent().siblings('.dropdown.show').removeClass('show');
                // Toggle class for the clicked dropdown-menu
                $(this).next('.dropdown-menu').toggleClass('show');
            });

            // Close dropdown-menus when clicking outside of them
            $(document).on('click', function (e) {
                if (!$(e.target).closest('.main-menu .dropdown').length) {
                    $('.main-menu .dropdown .dropdown-menu').removeClass('show');
                }
            });

            // Prevent closing the dropdown-menu when clicking inside it
            $('.main-menu .dropdown-menu').on('click', function (e) {
                e.stopPropagation();
            });
        });
    }
}

export default scriptNavbar;

And this is my style-navbar.scss:

/* Default styles */
.main-menu {
    padding: 0;
}

.main-menu ul {
    padding: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    border-radius: 0;
}

.main-menu ul li {
    display: inline;
    margin: 0 5px 0 0;
}

.main-menu ul li:last-child {
    margin: 0;
}

.main-menu > ul li a,
.navbar-light .navbar-nav .nav-link {
    color: #303030;
    text-decoration: none;
    padding: 7px 15px 20px;
}

.main-menu ul li a.nav-link:first-child {
    padding-left: 0 !important;
}

.main-menu ul li ul {
    background-color: #000;
}

.main-menu ul li ul li {
    margin: 0;
}

.main-menu ul li ul li a {
    padding: 0.5rem;
    color: #fff;
}

.main-menu .navbar-nav .active > .nav-link {
    color: #CA2424;
}

.main-menu .dropdown-item:focus,
.main-menu .dropdown-item:hover {
    color: #fff;
    background-color: #272c33;
}

.main-menu .dropdown-item.active,
.main-menu .dropdown-item:active {
    background-color: #d2335b;
}

.main-menu .navbar-toggler {
    border: none;
    padding-right: 3%;
}

.main-menu .dropdown-toggle::after {
    vertical-align: 0.155em;
}

.main-menu ul li .dropdown-menu .dropdown > a::after {
    display: inline-block;
    margin-left: 0.355em;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.main-menu .dropdown-menu li {
    display: block;
}

.main-menu .dropdown-menu .dropdown-menu {
    top: -1px;
    left: 100%;
}

.navbar-brand {
    display: contents;
}

/* Responsive styles */
@media (max-width: 767px) {
    .main-menu {
        border-top: 2px solid #f2f2f2;
        padding: 2%;
        margin-top: 2%;
    }

    /* Add background color to third-level submenu */
    .main-menu .dropdown-menu ul li {
        margin-left: 8%;
        position: relative;
        padding-left: 8%;
    }

    .main-menu .dropdown-menu ul li::before {
        font-family: "dashicons";
        content: "\f474";
        position: absolute;
        transform: scaleX(-1);
        font-size: larger;
        color: #fff;
        margin: 5px 3%;
        left: -8%;
    }
}

If you want to look my theme folder where every my code exist, you can check my github here:

https://github.com/achann08/wc_course/tree/main/wp-content/themes/kreasi

I need help, thank you very much.

To dropdown toggle split in Bootstrap Navwalker.

Answer 1

I faced same issue in my theme and I have saw your theme file to be sure from few things:

1. you didn't have the Navwalker file in your theme. (Navwalker.php)
2. Navwalker doesn't need any js file.
3. you need to search for clean copy of Navwalker which allow (Multiple Levels) as you asked.

the solution: use this copy: craftnce-agency-wordpress-theme

1. Just copy the nav walker code from here and make a file in your project and paste it there, e.g: in css folder file name (nacwalker.php)
2. go your function file in your theme and add this

require_once get_template_directory() . '/css/nacwalker.php';

add this code in your header:

wp_nav_menu(array(
      'theme_location'            =>  'primary',
      'menu_class'                =>  '',
      'menu-container'            =>  'false',
      'fallback_cb'               => '__return_false',
      'items_wrap'                => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-lg-0 text-sm %2$s">%3$s</ul>',
      'depth'                     => 2,
      'walker'                    => new craftnce_wp_nav_menu_walker(),
  ));

then you are ready. no need to any js file. and the styling is easy.