Adding a navform to the walker class

[subigya]

This walker class class is awesome!

Is there a way to add a nav-form to this code in the following way ?

[nav]
[div]
WALKER CLASS LIST GENERATED NAV LIST
include ('searchform-navbar.php');
[/div]
[/nav]

[PlanBrewski]

You sure can!

Since the walker only outputs the nav list you can just add it to the code as you normally would. If you set the wp_nav_menu() functions 'container' variable to false you can wrap the menu your own code and include the search form.

The code below will create a responsive navbar with brand text & a search form; while using the walker class to process the menu items.

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => false,
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>

[subigya]

delicious, thank you.

[fabianborg]

Hi is there a way to get the search form as the last listing within the navbar (before the closing ul) so that I have the search form displayed totally on the right. The method above is displaying the search form before the nav listings.

[claudiucotan]

Bootstrap 4.5.0:

HTML/PHP:

<nav id="site-navigation" class="navbar navbar-expand-lg navbar-dark bg-dark">
			<div class="container">
				<a class="navbar-brand" href="#">Navbar</a>
				<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>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'menu-1',
							'menu_id'        => 'primary-menu',
							'depth'				=> 2, // 1 = with dropdowns, 0 = no dropdowns.
							'container'			=> 'false',
							'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()
						)
					);
					?>
					<form class="form-inline my-2 my-lg-0">
						<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
						<button type="submit" class="btn btn-outline-secondary my-2 my-sm-0">Submit</button>
					</form>
				</div><!-- /.navbar-collapse -->
    
    
  

			</div><!-- #container -->
			
		</nav><!-- #site-navigation -->

WP BOOTSTRAP NAVWALKER:
https://wp-bootstrap.github.io/wp-bootstrap-navwalker/#usage

[bchavdarov]

If you set container to false instead of div, the div tag disappears and the navbar becomes a complete mess. Especially in the mobile version. This is not a solution.

[pattonwebz]

If you set container to false instead of div, the div tag disappears and the navbar becomes a complete mess. Especially in the mobile version. This is not a solution.

Wrap the call to wp_nav_menu() in the div and that's a non-issue.

[bchavdarov]

Thank you, pattonwebz. It works. I'm mad at myself for not seeing this earlier. :)