Bootstrap navbar class not working properly

Question

This is html code without php included inside ul li tag:

<html>
<body>  
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                   <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>            
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">Adventure</a></li>
                <li><a href="#">Fashion<span class="caret"></span></a></li>
                <li><a href="#">Travel</a></li>
                <li><a href="#">Story</a></li>
            </ul>               
        </nav>
    </div>
</body>
</html>

This is html code with php included inside ul li tag:

<html>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>        
        <nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">             
                <?php
                    $args = array(
                        'theme_location' => 'primary',                          
                    );

                ?>
                <li><?php wp_nav_menu($args);?></li>                    
            </ul>               
        </nav>
    </div>
</body>
</html>

Here's the navbar image which works like this: Working code image

Here's the navbar image which is not loading css class: Image which is not loading css and links are different b'cause theme development function is called

score 0 · Answer 1 · answered Jul 29 '17 at 07:10

we will write this code to show you nav

<?php 
           wp_nav_menu(array(
                    'theme_location' =>'primary',
                    'container' => 'nav',
                    'container_class' => 'navbar-collapse navbar',
                    'menu_class'      => 'nav navbar-nav navbar-right'
                ));
            ?>

and remove this code

<nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">             
                <?php
                    $args = array(
                        'theme_location' => 'primary',                          
                    );

                ?>
                <li><?php wp_nav_menu($args);?></li>                    
            </ul>               
        </nav>

score 0 · Answer 2 · answered Jul 29 '17 at 07:20

add below code in your template for menu

<html>
<body>  
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                   <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>            
        <nav class="navbar navbar-default">

         <?php
            $header_menu_defaults = array(
                'theme_location'  => 'primary',
                'menu'            => 'your menu name here',
                'container'       => '',
                'container_class' => '',
                'container_id'    => '',
                'menu_class'      => 'nav navbar-nav',
                'menu_id'         => '',
                '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( $header_menu_defaults );
            ?>
        </nav>
    </div>
</body>
</html>

Fahmi B. · Answer 3 · 2017-07-29T07:30:41.157

if you want an ideal solution you may use the walker class

there is a question like yours and you can be inspired from it

visit this link: https://stackoverflow.com/a/11948374/5608642

but if you want simple thing, you can try this code

<html>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>        
        <nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">         

                 <?php
                     $navLocation = 'primary';
                     $nav = wp_get_nav_menu_object( $navLocation );
                     $navItems = wp_get_nav_menu_items( $nav->term_id, array( 'order' => 'DESC' ) );
                 ?>

                 <?php foreach( $navItems as $item ): ?>                    
                     <?php if ( !$item->menu_item_parent ): ?>
                          <li><a href="<?= $item->url; ?>"> <?= $item->title; ?> </a> </li>
                     <?php endif; ?>
                 <?php endforeach; ?>
            </ul>               
        </nav>
    </div>
</body>
</html>

Bootstrap navbar class not working properly

3 Answers3