html/bootstrap menu to wordpress with dropdown

Question

I am aware that this question has been asked a good few times but I still can't seem to find a solution to my exact problem.

This is the non-wordpress version of my menu:

<div class="nav-container">
            <div>
                <div class="bar bar--sm visible-xs">
                    <div class="container">
                        <div class="row">
                            <div class="col-3 col-md-2">
                                <a href="index.html"> <img class="logo logo-dark" alt="logo" src="img/logo-dark.png"> <img class="logo logo-light" alt="logo" src="img/logo-light.png"> </a>
                            </div>
                            <div class="col-9 col-md-10 text-right">
                                <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs hidden-sm"> <i class="icon icon--sm stack-interface stack-menu"></i> </a>
                            </div>
                        </div>
                    </div>
                </div>
                <nav id="menu1" class="bar bar-1 hidden-xs">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-1 col-md-2 hidden-xs">
                                <div class="bar__module">
                                    <a href="index.html"> <img class="logo logo-dark" alt="logo" src="img/logo-dark.png"> <img class="logo logo-light" alt="logo" src="img/logo-light.png"> </a>
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-12 text-right text-left-xs text-left-sm">
                                <div class="bar__module">
                                    <ul class="menu-horizontal text-left">
                                        <li> <a href="#">
                                        Single Link
                                    </a> </li>
                                        <li class="dropdown"> <span class="dropdown__trigger">
                                        Dropdown Slim
                                    </span>
                                            <div class="dropdown__container">
                                                <div class="container">
                                                    <div class="row">
                                                        <div class="dropdown__content col-lg-2">
                                                            <ul class="menu-vertical">
                                                                <li> <a href="#">Single Link</a> </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

What I did discover is that it seems I should be using bootstrap nav-walker which I have loaded in:

https://github.com/wp-bootstrap/wp-bootstrap-navwalker

And here is how I have modified the navigation to try make it work in Wordpress:

<div class="nav-container">
            <div>
                <div class="bar bar--sm visible-xs">
                    <div class="container">
                        <div class="row">
                            <div class="col-3 col-md-2">
                                <a href="index.html"> <img class="logo logo-dark" alt="logo" src="img/logo-dark.png"> <img class="logo logo-light" alt="logo" src="img/logo-light.png"> </a>
                            </div>
                            <div class="col-9 col-md-10 text-right">
                                <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs hidden-sm"> <i class="icon icon--sm stack-interface stack-menu"></i> </a>
                            </div>
                        </div>
                    </div>
                </div>
                <nav id="menu1" class="bar bar-1 hidden-xs">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-1 col-md-2 hidden-xs">
                                <div class="bar__module">
                                    <a href="index.html"> <img class="logo logo-dark" alt="logo" src="img/logo-dark.png"> <img class="logo logo-light" alt="logo" src="img/logo-light.png"> </a>
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-12 text-right text-left-xs text-left-sm">
                                <div class="bar__module">
                                    <?php
                                      $args = [
                                     'theme_location' => 'main-menu',
                                     'depth'          => 2,
                                     'menu_class'     => 'menu-horizontal text-left',
                                     'walker'         => new WP_Bootstrap_Navwalker()
                                      ];
                                     wp_nav_menu( $args );
                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

This displays the non-dropdown menu correctly but the actual dropdown list that should only be shown once activated, is showing up in horrible blue text and not styled properly at all.

Answer 1

Try this walker.

Example usage:

wp_nav_menu( [
    'menu_class'     => 'menu-horizontal text-left',
    'container'      => '',
    'depth'          => 2,
    'theme_location' => 'main-menu',
    // You should have loaded the class-my-bs-walker-nav-menu.php file from
    // within the theme's functions.php file.
    'walker'         => new My_BS_Walker_Nav_Menu,
] );

The walker is not intended as a "global" walker for any Bootstrap menus; instead, it was intended just for the menu structure that you provided in your question.