How to set up Bootstrap 4 nav menu with dropdown+ children in WordPress? Children not showing in my menu %^(

Question

Thanks in advance for your help and interest.

First attempt at WordPress Theme creation. Followed a tutorial on MDBootstrap.com and got the basics working. Now trying to get a basic Bootstrap Nav Menu to show children in the menu on the page. (Yes, I know that native functionality was deprecated in v4) I’ve seen several good working examples, however, in as many articles as I’ve read, few are for bootstrap menu with levels of children that will show in WordPress, and none have worked for me here. I’ve got several elegant and simple examples on my desktop in plain vanilla HTML5 that work great, but NOT what I’m trying to do.

Heres what I have:

I put wp-bootstrap-navwalker from Edward McIntyre in my theme directory and changed the nav code to:

<!-- Navbar -->
    <!-- Brand -->
    <a class="navbar-brand pt-0 waves-effect" href="<?php bloginfo('url')?>">
        <img src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" alt="MDB logo">
    </a>

    <!-- Collapse -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">

<!-- Navwalker -->
    <?php        

        wp_nav_menu( array(
            'menu'            => 'MDB Top Menu',        
            'theme_location'  => 'header',
            'depth'           => 3, // 1 = no dropdowns, 2 = with dropdowns.
            'container'       => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id'    => 'navbar-collapse-1',
            'menu_class'      => 'nav navbar-nav',
            'fallback_cb'     => 'false',
            'walker'          => new WP_Bootstrap_Navwalker(),
        ) );

    ?>

<!-- / Navwalker -->

            </li>
        <!-- Left -->
        </ul>

        <!-- Right -->
        <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item">
                <a href="https://www.facebook.com/mdbootstrap" class="nav-link waves-effect" target="_blank">
                    <i class="fa fa-facebook"></i>
                </a>
            </li>
            <li class="nav-item">
                <a href="https://twitter.com/MDBootstrap" class="nav-link waves-effect" target="_blank">
                    <i class="fa fa-twitter"></i>
                </a>
            </li>
            <li class="nav-item">
                <a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded waves-effect"
                    target="_blank">
                    <i class="fa fa-github mr-2"></i>MDB GitHub
                </a>
            </li>
        </ul>

    </div>

</div>

Then I put the hooks in functions.php:

/**
  • BOOTSTRAP Custom Navigation Walker – bootstrap menu in wordpress
  • For documentation see:
  • https://github.com/wp-bootstrap/wp-bootstrap-navwalker
    /
    /
    *
  • Register Custom Navigation Walker
    */
    function register_navwalker(){
    require_once get_template_directory() . ‘/class-wp-bootstrap-navwalker.php’;
    }
    add_action( ‘after_setup_theme’, ‘register_navwalker’ );

/**

  • If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.
    */

if ( ! file_exists( get_template_directory() . ‘/class-wp-bootstrap-navwalker.php’ ) ) {
// File does not exist… return an error.
return new WP_Error( ‘class-wp-bootstrap-navwalker-missing’, __( ‘It appears the class-wp-bootstrap-navwalker.php file may be missing.’, ‘wp-bootstrap-navwalker’ ) );
} else {
// File exists… require it.
require_once get_template_directory() . ‘/class-wp-bootstrap-navwalker.php’;
}

/**

  • You will also need to declare a new menu in your functions.php file if one doesn’t already exist.
    */
    register_nav_menus( array(
    ‘primary’ => __( ‘Primary Menu’, ‘mdbtheme’ ),
    ) );

add_filter(‘nav_menu_css_class’, ‘add_classes_on_li’, 1, 3);
function add_classes_on_li($classes, $item, $args)
{
$classes[] = ‘nav-item’;

return $classes;

}

add_filter(‘wp_nav_menu’, ‘add_classes_on_a’);
function add_classes_on_a($ulclass)
{
return preg_replace(‘/<a /’, ‘<a class="nav-link"’, $ulclass);
}

<======================================================================>

And as a result I get a passable single level dropdown as in this image:

enter image description here

<======================================================================>

HOWEVER this is NOT what I’m trying to achieve…. Take a look at the next picture of the WordPress Admin Menu area and you can see that what I’m actually getting is not how I’ve set it up in the WP Admin Menu area: Under the STORE top level I get the SHOP in the dropdown however the Account and following links under SHOP should be a CHILD MENU.

The question is: How do I achieve this with WordPress?

enter image description here

<======================================================================>

Under SHOP in the menu I SHOULD be getting a CHILD menu.

Any insights and help greatly appreciated, for a hopefully simple, solution.

Thanks again and best to all….

0
clsimco 2 months 0 Answers 14 views 0

Leave an answer