0

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.

0

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.

  • Thank you so much! I just want to try understand what you said. When you said that the walker is not intended as a global walker, are you referring to the one I used initially or the one you provided? – user8463989 Mar 23 '18 at 14:20
  • I was referring to the one that I provided. And actually, I was really just saying that, if you change the menu markup, then you'd probably need to change the walker code. Or create another custom walker class. =) – Sally CJ Mar 23 '18 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.