how can i add search box in navigation

[Hujjat]

i want to add search box to nav bar how can i do that

not only style of that that should work when we search

[jacobraccuia]

here is the code I used. I have nav on left, search bar on right. I am just copy and pasting, but you should be able to follow pretty well.

I don't think there is any extra CSS I used to position the elements besides spacing from the top ( margins ).

<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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 home_url(); ?>"><img src="<?php echo THEME_DIR; ?>/images/logo_250.png" width="250" alt="logo" /></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
           <?php 
                wp_nav_menu( array(
                    'theme_location'    => 'primary_menu',
                    'depth'             => 2,
                    'container'         => false,
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                    );
            ?>
            <?php $ph = "GOLD ALL IN MY SEARCH"; ?>
            <form action="<?php echo home_url(); ?>" id="search_form" class="search_wrapper navbar-form navbar-right" method="get">
                <label class="sr-only" for="s">Search</label>
                <div class="form-group">
                    <input type="text" class="search_input" id="s" name="s" autocomplete="off" 
                        value="<?php echo $ph; ?>"
                        onfocus="if(this.value=='<?php echo $ph; ?>')this.value='';"
                        onblur="if(this.value=='')this.value='<?php echo $ph; ?>'"
                        placeholder="<?php echo $ph; ?>"
                    />
                </div>
                <input type="submit" value="" id="search_submit" class="search_submit button normal" />
            </form>
        </div><!--/.nav-collapse -->
    </div>
</div>

[claudiosanches]

47 and #48

[Hujjat]

thank's to all that was great

[blackmamb41]

how can i add new item like icon or something beside search bar?

[24Degrees]

If someone is still reading this: I noticed "autocomple=off" but it would be nice to have that working ! Any advice welcome.

For others who are still using this, here's my code so far:

                            <!-- Begin search -->
                            <form action="<?php echo home_url(); ?>" id="search_form" class="search_wrapper navbar-form navbar-right" method="get">
                                <label class="sr-only" for="s">Zoeken</label>
                                <div class="input-group">
                                    <input type="text" class="search_input form-control" id="s" name="s" autocomplete="on" value="<?php echo $ph; ?>" onfocus="if(this.value=='<?php echo $ph; ?>')this.value='';" onblur="if(this.value=='')this.value='<?php echo $ph; ?>'" placeholder="Zoeken naar..." />
                                    <span class="input-group-btn"><button type="submit" class="btn btn-success" id="search-form">
                                            <i class="fa fa-search"></i>
                                        </button></span>
                                </div>
                            </form>
                            <!-- End search -->