Bootstrap navbar toggle hide when click in mobile view

Hi arslan91, it seems that your nav toggle button has no menu/links, maybe that is why nothing happen when you press the toggle button. Can you share the code you integrated for the navbar section?

yeah you are right there was no menu. but now i added some pages. Still the same result.

Below is my code.

<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="row nav-row">
				<!-- Brand and toggle get grouped for better mobile display -->
				<header>
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
						<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="<?php echo home_url(); ?>">
				        	<img alt="Brand" src="<?php bloginfo('template_url'); ?>/howtotalks.png">
				    	</a>
				    </div>
				</header>

			    <!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="navbar-collapse-1">
					<?php
			            $args = array(
			                'theme_location'    => 'primary',
			                'depth'             => 2,
			                'container'         => '',
			                'menu_class'        => 'nav navbar-nav navbar-right',
			                'walker' 			=> new wp_bootstrap_navwalker()
			            );
			        ?>
			        <?php wp_nav_menu($args); ?>

				</div><!--navbar-collapse -->
			</div>
		</div><!-- container -->
	</nav>

I took a look and think it is a styling problem.

Try adding the following CSS to your theme/child theme:

.navbar-brand {
    width: 80%;
}
#navbar-collapse-1 {
    position: relative;
    z-index: 1;
    background-color: #e7e7e7; /*Or any other color you want the background of your nav to be*/
}
@media (min-width: 768px) {
    #navbar-collapse-1 {
        background-color: transparent;
    }
}

Let me know how it turns out. You can also edit your margins and paddings accordingly to make your logo and other elements align better.

oopixjane,

i made these changes but there are some issues

1.it changes the color of whole <nav>

2. It overlap the brand logo

3. In Mobile view, it works fine but. when i toggle, dropdown menu appear with scrol bar. all options are not appearing at once.

@arslan91, let’s try to solve the mobile menu first and ignore the background. There is a scroll bar because .nav has a fixed height of 68px. Let me know if the CSS below now allow the menu to appear all at once?

.nav {
    /* height: 68px; */
}
.navbar-brand {
    width: 80%;
}
#navbar-collapse-1 {
    position: relative;
    z-index: 1;
}

@oopixijany

yeah it works. it is now overlapping the body content, its fine but good if it drag the body content down. is there any way.

Oh! I thought you wanted a menu that overlays your content. In that case, ignore position: relative; z-index: 1;. You just need to remove .navbar { height: 70px; } or you can add:

.navbar {
    height: auto;
}

Its now fine.

Thanks you ….

You are welcome. Remember to mark the topic as resolved. ??

Thanks and marked as Resolved … ??