Support » Themes and Templates » Nav menu based on Bootstrap

  • Hello all,

    I’m creating a starter theme based on Bootstrap for my own use (for the moment) and am facing a problem.

    I want a menu based on Bootstrap navbar menu (https://getbootstrap.com/components/#navbar).

    Here is my code :

    <!-- Main Menu / Primary Menu -->
    				<nav class="navbar navbar-default navbar-static-top nav-primary">
    					<div class="container">
    
    						<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>
    						</div>
    
    						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    
    <?php
    // https://codex.wordpress.org/Function_Reference/wp_nav_menu
    $defaults = array(
    	'theme_location'  => '',
    	'menu'            => '',
    	'container'       => '',
    	'container_class' => '',
    	'container_id'    => '',
    	'menu_class'      => 'nav navbar-nav menu-primary', // List classes
    	'menu_id'         => 'menu-top',
    	'echo'            => true,
    	'fallback_cb'     => 'wp_page_menu',
    	'before'          => '',
    	'after'           => '',
    	'link_before'     => '',
    	'link_after'      => '',
    	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    	'depth'           => 0,
    	'walker'          => ''
    );
    
    wp_nav_menu( $defaults );
    
    ?>
    
    						</div> <!-- / .collapse .navbar-collapse #bs-example-navbar-collapse-1 -->
    					</div> <!-- / .container -->
    				</nav> <!-- / .navbar -->

    Strangely, it works on a theme I’ve created before but not on this new starter theme.

    The problem is : the menu classes (nav navbar-nav menu-primary) are in a DIV, and not on the UL, even with :
    'container' => '',
    I’ve tried to put it to false too, it doesn’t work either.

    Here is the outpout :

    <!-- Main Menu / Primary Menu -->
    				<nav class="navbar navbar-default navbar-static-top nav-primary">
    					<div class="container">
    
    						<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>
    						</div>
    
    						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    
    <div class="nav navbar-nav menu-primary"><ul><li class="page_item page-item-2 current_page_item"><a href="http://localhost/WordPress-starter-theme/">Accueil</a></li><li class="page_item page-item-4"><a href="http://localhost/WordPress-starter-theme/index.php/blog/">Blog</a></li></ul></div>
    
    						</div> <!-- / .collapse .navbar-collapse #bs-example-navbar-collapse-1 -->
    					</div> <!-- / .container -->
    				</nav> <!-- / .navbar -->

    Any idea why the extras <div> are here ? And why the classes are not applied to

      ?

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Nav menu based on Bootstrap’ is closed to new replies.