Search form I added in nav bar isn't included in the hamburger menu on small screens

[AlanaFarkas]

Hello,

I've added a search form to the main navigation menu on my site. However, on small screens when the menu changes into the hamburger menu, the search form always remains outside the collapsible menu. How can I make sure that the search form gets included in the collapsible menu? My code is below, any help would be appreciated. Thanks in advance!

`

<?php esc_html_e( 'Skip to content', 'understrap' ); ?>

    <nav id="nav-override" class="navbar navbar-toggleable-md navbar-inverse bg-inverse override">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- The WordPress Menu goes here -->
            <?php wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    'container_class' => 'collapse navbar-collapse',
                    'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'walker'          => new WP_Bootstrap_Navwalker(),
                )
            ); ?>

            <i class="fa fa-search" aria-hidden="true"></i>
            <form id="nav-search-form" role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                <label>
                    <input type="search" class="search-field"
                        value="<?php echo get_search_query() ?>" name="s"
                        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </label>
                <input type="submit" class="search-submit search-btn-hack"
                    value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
            </form>

    </nav><!-- .site-navigation -->

</div><!-- .wrapper-navbar end -->`

[AlanaFarkas]

I wanted to update this in case anyone else had a similar question. I was able to achieve the desired results by wrapping the wp_nav_menu in a new div giving it the class of 'collapse navbar-collapse' and an id of 'new-target'. I commented out the container_class and container_id vaules in the wp_nav_menu array. Then I changed the data-target value on the button to match the 'new-target' id which seemed to solve this issue. Updated code below.

`

<?php esc_html_e( 'Skip to content', 'understrap' ); ?>

    <nav id="nav-override" class="navbar navbar-toggleable-md navbar-inverse bg-inverse override">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#new-target" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- The WordPress Menu goes here -->
            <div class="collapse navbar-collapse" id="new-target">
            <?php wp_nav_menu(
                array(
                    'theme_location'  => 'primary',
                    // 'container_class' => 'collapse navbar-collapse',
                    // 'container_id'    => 'navbarNavDropdown',
                    'menu_class'      => 'navbar-nav',
                    'fallback_cb'     => '',
                    'menu_id'         => 'main-menu',
                    'walker'          => new WP_Bootstrap_Navwalker(),
                )
            ); ?>

            <i class="fa fa-search" aria-hidden="true"></i>
            <form id="nav-search-form" role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                <label>
                    <input type="search" class="search-field"
                        value="<?php echo get_search_query() ?>" name="s"
                        title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </label>
                <input type="submit" class="search-submit search-btn-hack"
                    value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
            </form>
        </div>

    </nav><!-- .site-navigation -->

</div><!-- .wrapper-navbar end -->

`