wordpresstwitter-bootstrapwp-nav-walker

Wordpress Bootstrap Navwalker Driving Me Bonkers


Having trouble getting the navwalker to expand on mobile.

I have added the code to functions php

// Register Custom Bootstrap Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

Here is my navwalker code, if anyone can help me resolve this conundrum I would be most greatful. Please excuse the formatting on here.

	<nav class="main-menu navbar navbar-bg thetop" role="navigation">
		<div class="container-fluid">
			<!-- 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>
				<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
				<a class="navbar-brand" href="<?php echo home_url(); ?>">					
					<?php if (function_exists('the_custom_logo')) {
						the_custom_logo();
					}
					else{
							bloginfo('name');
						}
					?>
				</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<ul class="nav navbar-nav">
				<?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())
				);
				?>
			</ul>
			<!-- Search Form -->
			<form id="searchform" class="navbar-form navbar-right" role="form" action="<?php echo home_url( '/' ); ?>">
				<div class="input-group">
					<input type="text" class="form-control" name="s" placeholder="Ara"><span class="input-group-btn"><button type="submit" class="btn btn-default btn-primary -red"><span class="glyphicon glyphicon-search"></span></button></span>
					
				</div>
				<a href="#" class="btn btn-top-cta affirmation hidden-xs hidden-sm"></a>
			</form>

		</div>
	</nav>


Solution

  • Nevermind I figured this out. I am building a new theme using wpBootstrapStarter. Recently updated the theme which also updated bootstrap release using jquery 3.3.2. I just downgraded and all is well.

    I guess the devs didn't fully test before release. Good job i spotted via console.