Bootstrap 4 Nav Walker button shows on full width

  • Resolved labyrinthman

    (@labyrinthman)


    7 years, 10 months ago

    I’m currently developing a theme and Bootstrap 4 Nav Walker creates an unwanted button on full width.

    This is the image to see how it looks like click to see the image

    This is the code in functions.php:

    
register_nav_menus( array(
			'menu-1' => esc_html__( 'Primary', 'stevan' ),
		) );

    This is in the header.php:

    <div class="navigation">
        <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="<?php echo get_home_url(); ?>"><?php echo get_bloginfo( 'name' ); ?></a>
		        <?php
		        wp_nav_menu( array(
		        	'theme_location' => 'menu-1',
					'menu_id'        => 'primary-menu', 
		            'depth'             => 2,
		            'container'         => 'div',
		            'container_class'   => 'collapse navbar-collapse',
		            'container_id'      => 'bs-example-navbar-collapse-1',
		            'menu_class'        => 'nav navbar-nav ml-auto',
		            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
		            'walker'            => new WP_Bootstrap_Navwalker(),
		        ) );
		        ?>
		    </div>
		</nav>
    </div>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 9 months ago

    Are you sure it’s not the navbar-toggler button you are seeing? Perhaps your CSS needs adjustment to hide this on wider screens.

    Thread Starter labyrinthman

    (@labyrinthman)

    7 years, 9 months ago

    I have fixed it. Now it’s working.

     <div class="row">
          <div class="col-md-12 col-sm-12">

            <!-- Navigation -->
            <nav class="navbar navbar-default">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".bs-example-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>
                <!-- Brand -->
                <a class="navbar-brand page-scroll sticky-logo" href="index.html">
                  <h1><span>e</span>Business</h1>
                  <!-- Uncomment below if you prefer to use an image logo -->
                  <!-- <img src="img/logo.png" alt="" title=""> -->
								</a>
              </div>
              <!-- Collect the nav links, forms, and other content for toggling -->
               <?php
		        wp_nav_menu( array(
		        	'theme_location'    => 'primary',  
		            'container'         => 'div',
		            'container_class'   => 'collapse navbar-collapse main-menu bs-example-navbar-collapse-1 ml-auto', 
		            'menu_class'        => 'nav navbar-nav ml-auto',
		            'walker'            => new WP_Bootstrap_Navwalker(), // This controls the display of the Bootstrap Navbar
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback', // For menu fallback 
		        ) );
		        ?> 
              <!-- navbar-collapse -->
            </nav>
            <!-- END: Navigation -->
          </div>
        </div>
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Bootstrap 4 Nav Walker button shows on full width’ is closed to new replies.