Mobile menu only shows search

[FinlayDaG33k]

HIi there,

I'm trying to get the bootstrap-navwalker to work nicely with phones. The menu bar shows up, but it only shows search? Screenshot

This is how it shows up on a proper desktop: screenshot

This is my navbar.php:

<nav class="navbar navbar-static-top navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
            <a class="navbar-brand" href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left">
                <?php
                    wp_nav_menu( array(
                        'menu'              => 'primary',
                        'depth'             => 7,
                        'container'         => 'div',
                        'container_class'   => 'navbar-collapse collapse',
                        'menu_class'        => 'nav navbar-nav',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                    if (has_nav_menu('primary')) {
                    wp_nav_menu($args);
                    }
                ?>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <form class="navbar-form navbar-left" action="<?php echo esc_url( site_url() ); ?>" role="search">
                    <div class="form-group">
                        <input class="form-control" name="s" placeholder="Search" type="text">
                    </div>
                    <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
                </form>
            </ul>
        </div>
    </div>
</nav>

The full sourcecode of my theme is available: Here (warning: you will cringe <3)

I hope somebody could tell me how to fix this :\ I get a lot of complaints about it...

Cheers!

[pattonwebz]

Hey Aroop,

I think I can where the problem is. Actually I can see 2 issues the first one is not technically navwalker related but wanted to mention it anyway. There's an if statement which is unnecessary and looks like it may not work beacuse no $args array is defined.

                    if (has_nav_menu('primary')) {
                    wp_nav_menu($args);
                    }

Looks to me that the condition and extra wp_nav_menu call is unnneded here. If you wanted you could wrap the if(has_nav_menu('primary')) around the entire menu to prevent it showing if you didn't have a menu specified in that location.

The other thing I think I spotted is probably the reason why nav items aren't visible on mobiles. You have additional .collapse classes that are conflicting. Whenever you click the button it un-collapses the targeted ID container. In your case it's un-collapsing the entire wrapper (but is not uncollapsing the ul inside that container that holds the links.

To fix this you should change the code in the inc/php/header.php of your theme to match something like this:

<nav class="navbar navbar-static-top navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
            <a class="navbar-brand" href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
        </div>
        <div class="navbar navbar-default" role="navigation">
            <?php
                wp_nav_menu( array(
                    'menu'              => 'primary',
                    'depth'             => 7,
                    'container'         => 'div',
                    'container_class'   => 'navbar-collapse collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav navbar-left',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
                if (has_nav_menu('primary')) {
                wp_nav_menu($args);
                }
            ?>
            <ul class="nav navbar-nav navbar-right">
                <form class="navbar-form navbar-left" action="<?php echo esc_url( site_url() ); ?>" role="search">
                    <div class="form-group">
                        <input class="form-control" name="s" placeholder="Search" type="text">
                    </div>
                    <button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
                </form>
            </ul>
        </div>
    </div>
</nav>

[pattonwebz]

Solution for OPs issue was implimented in commit referenced above.