为什么我的 html 菜单到 WordPress 转换主题没有显示？

Question

I have been trying to add a menu in HTML to WordPress converted theme, I have made every things header.php , footer.php and index.php . Now in my header.php file, i have my menu but i feel confused that how to add that as it's structure is quite different. My 'header.php' file in which i added menu through Pinegrow theme converter

 <header class="header-area"> <!-- Top Header Area --> <div class="top-header"> <div class="container h-100"> <div class="row h-100"> <div class="col-12 h-100"> <div class="header-content h-100 d-flex align-items-center justify-content-between"> <div class="academy-logo"> <!-- <a href="index.html"><img src="img/core-img/logo.png" alt=""></a> --> <h3 style="color: #F3F3F3"><?php _e( 'JCI', 'mytheme' ); ?></h3> </div> <div class="login-content"> <a href="#" style="color:#F3F3F3;"><?php _e( 'Students Portal', 'mytheme' ); ?></a> </div> </div> </div> </div> </div> </div> <!-- Navbar Area --> <div class="academy-main-menu"> <div class="classy-nav-container breakpoint-off"> <div class="container"> <!-- Menu --> <nav class="classy-navbar justify-content-between" id="academyNav"> <!-- Navbar Toggler --> <div class="classy-navbar-toggler"> <span class="navbarToggler"><span></span><span></span><span></span></span> </div> <!-- Menu --> <div class="classy-menu"> <!-- close btn --> <div class="classycloseIcon"> <div class="cross-wrap"> <span class="top"></span> <span class="bottom"></span> </div> </div> <!-- Nav Start --> <?php if ( has_nav_menu( 'primary' ) ) : ?> <?php PG_Smart_Walker_Nav_Menu::$options['template'] = '<ul id="{ID}" class="{CLASSES}"> <li> <a {ATTRS}>{TITLE}</a> </li> </ul>'; wp_nav_menu( array( 'container' => '', 'theme_location' => 'primary', 'items_wrap' => '<div class="%2$s classynav" id="%1$s">%3$s</div>', 'walker' => new PG_Smart_Walker_Nav_Menu() ) ); ?> <?php endif; ?> <!-- Nav End --> </div> <!-- Calling Info --> <div class="calling-info"> <div class="call-center"> <a href="tel:+918210585885"><i class="icon-telephone-2"></i> <span><?php _e( '(+91) 8210585885', 'mytheme' ); ?></span></a> </div> > </div> </nav> </div> </div> </div> </header>

and here is the complete structure of menu i want to insert .

 <header class="header-area"> <!-- Top Header Area --> <div class="top-header"> <div class="container h-100"> <div class="row h-100"> <div class="col-12 h-100"> <div class="header-content h-100 d-flex align-items-center justify-content-between"> <div class="academy-logo"> <!-- <a href="index.html"><img src="img/core-img/logo.png" alt=""></a> --> <h3 style="color: #F3F3F3">JCI</h3> </div> <div class="login-content"> <a href="#" style="color:#F3F3F3;">Students Portal</a> </div> </div> </div> </div> </div> </div> <!-- Navbar Area --> <div class="academy-main-menu"> <div class="classy-nav-container breakpoint-off"> <div class="container"> <!-- Menu --> <nav class="classy-navbar justify-content-between" id="academyNav"> <!-- Navbar Toggler --> <div class="classy-navbar-toggler"> <span class="navbarToggler"><span></span><span></span><span></span></span> </div> <!-- Menu --> <div class="classy-menu"> <!-- close btn --> <div class="classycloseIcon"> <div class="cross-wrap"> <span class="top"></span> <span class="bottom"></span> </div> </div> <!-- Nav Start --> <div class="classynav"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="#">Downloads</a> <ul class="dropdown"> <li> <a href="index.html">Admission Form</a> </li> <li> <a href="about-us.html">Our Prospectus</a> </li> </ul> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="course.html">Course</a> </li> <li> <a href="contact.html">Contact</a> </li> <li> <a href="blog.html">Notice and Events</a> </li> </ul> </div> <!-- Nav End --> </div> <!-- Calling Info --> <div class="calling-info"> <div class="call-center"> <a href="tel:+918210585885"><i class="icon-telephone-2"></i> <span>(+91) 8210585885</span></a> </div> > </div> </nav> </div> </div> </div> </header>

I have also tried adding classes to the menu when creating menus in Wordpress by enabling classes option from screen option on the top left corner.

expected results are this

and the end results i got (menus are created successfully but when trying to add dropdowns this happens )

Answer 1

Add or update any wp_nav_menu() functions in your theme (often found in header.php) to use the new walker by adding a 'walker' item to the wp_nav_menu args array.

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation.

Typically the menu is wrapped with additional markup, here is an example of a fixed-top menu that collapse for responsive navigation at the md breakpoint.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

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