search field in the nav menu

Solved by adding following code and styles:

This in the header.php after  <div class="navbar-wrapper clearfix row-fluid">  :

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 <div><input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
 <input type="submit" id="searchsubmit" value="Найти" class="btn" />
 </div>
 </form>
<p class="forhelp"></p>

This is CSS:

  #searchform{ width: 200px;  float:right; margin-top: 20px; margin-right: 70px;   margin-left: 430px; margin-bottom: -10px;  }
#searchsubmit{ position: absolute;  margin-left: 4px;  }
   .forhelp{  width: 1300px; float: left;}

Thanks for sharing that sevar!
Could you also share the url of the website to see the result?
Cheers,
Nicolas.

Only now it is not in the nav menu but a little above. Here but it is not finished yet: https://video-walks.ru.com/

Thanks for this code, Sevar. I had the same request from my customer, so you have helped me make them happy! ;0) (Would be nice to have this added as a future theme option.)

Enjoy it! Yes it would be good as an option.

.forhelp{ width: 1300px; float: left; } to be changed to
.forhelp{ width: 100%; float: left; } or it will be no good in IE.

Hello,

When i put the code in the function.php of my child theme is won’t show the search bar in the navbar.
Here is my site: durksweb.nl.
This is the code from my function.php:

<?php
/**
*
* This program is a free software; you can use it and/or modify it under the terms of the GNU
* General Public License as published by the Free Software Foundation; either version 2 of the License,
* or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without
* even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
*
* You should have received a copy of the GNU General Public License along with this program; if not, write
* to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*
* @package   	Customizr
* @subpackage 	functions
* @since     	1.0
* @author    	Nicolas GUILLAUME <[email protected]>
* @copyright 	Copyright (c) 2013, Nicolas GUILLAUME
* @link      	https://themesandco.com/customizr
* @license   	https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

/**
* This is where Customizr starts. This file defines and loads the theme's components :
* 1) A function tc__f() used everywhere in the theme, extension of WP built-in apply_filters()
* 2) Constants : CUSTOMIZR_VER, TC_BASE, TC_BASE_CHILD, TC_BASE_URL, TC_BASE_URL_CHILD, THEMENAME, TC_WEBSITE
* 3) Default filtered values : images sizes, skins, featured pages, social networks, widgets, post list layout
* 4) Text Domain
* 5) Theme supports : editor style, automatic-feed-links, post formats, navigation menu, post-thumbnails, retina support
* 6) Plugins compatibility : jetpack, bbpress, qtranslate, woocommerce and more to come
* 7) Default filtered options for the customizer
* 8) Customizr theme's hooks API : front end components are rendered with action and filter hooks
*
* The method TC__::tc__() loads the php files and instanciates all theme's classes.
* All classes files (except the class__.php file which loads the other) are named with the following convention : class-[group]-[class_name].php
*
* The theme is entirely built on an extensible filter and action hooks API, which makes customizations easy as breeze, without ever needing to modify the core structure.
* Customizr's code acts like a collection of plugins that can be enabled, disabled or extended.
*
*/

/**
* The best and safest way to extend Customizr with your own custom functions is to create a child theme.
* You can add functions here but they will be lost on upgrade. If you use a child theme, you are safe!
* More informations on how to create a child theme with Customizr here : https://themesandco.com/customizr/#child-theme
*/

/**
* The tc__f() function is an extension of WP built-in apply_filters() where the $value param becomes optional.
* It is shorter than the original apply_filters() and only used on already defined filters.
*
* By convention in Customizr, filter hooks are used as follow :
* 1) declared with add_filters in class constructors (mainly) to hook on WP built-in callbacks or create "getters" used everywhere
* 2) declared with apply_filters in methods to make the code extensible for developers
* 3) accessed with tc__f() to return values (while front end content is handled with action hooks)
*
* Used everywhere in Customizr. Can pass up to five variables to the filter callback.
*
* @since Customizr 3.0
*/
if( !function_exists( 'tc__f' )) :
    function tc__f ( $tag , $value = null , $arg_one = null , $arg_two = null , $arg_three = null , $arg_four = null , $arg_five = null) {
       return apply_filters( $tag , $value , $arg_one , $arg_two , $arg_three , $arg_four , $arg_five );
    }
endif;

/**
* Fires the theme : constants definition, core classes loading
*
*
* @package      Customizr
* @subpackage   classes
* @since        3.0
* @author       Nicolas GUILLAUME <[email protected]>
* @copyright    Copyright (c) 2013, Nicolas GUILLAUME
* @link         https://themesandco.com/customizr
* @license      https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

class TC___ {

    //Access any method or var of the class with classname::$instance -> var or method():
    static $instance;

    public $tc_core;

    function __construct () {

        self::$instance =& $this;

        //this is the structure of the Customizr code : groups => ('path' , 'class_suffix')
        $this -> tc_core = apply_filters( 'tc_core',
                        array(
                            'fire'      =>   array(
                                            array('inc' , 'init'),//defines default values (layout, socials, default slider...) and theme supports (after_setup_theme)
                                            array('inc' , 'ressources'),//loads style and scripts
                                            array('inc' , 'utils'),//those are helpers used everywhere
                                            array('inc' , 'widgets'),//widget factory
                                            array('inc/admin' , 'admin_init'),//fires the customizer and the metaboxes for slider and layout
                                        ),
                            //the following files/classes define the action hooks for front end rendering : header, main content, footer
                            'header'    =>   array(
                                            array('parts' , 'header_main'),
                                            array('parts' , 'menu'),
                                            array('parts' , 'nav_walker'),
                                        ),
                            'content'   =>  array(
                                            array('parts', '404'),
                                            array('parts', 'attachment'),
                                            array('parts', 'breadcrumb'),
                                            array('parts', 'comments'),
                                            array('parts', 'featured_pages'),
                                            array('parts', 'gallery'),
                                            array('parts', 'headings'),
                                            array('parts', 'no_results'),
                                            array('parts', 'page'),
                                            array('parts', 'post'),
                                            array('parts', 'post_list'),
                                            array('parts', 'post_metas'),
                                            array('parts', 'post_navigation'),
                                            array('parts', 'sidebar'),
                                            array('parts', 'slider'),
                                        ),
                            'footer'    => array(
                                            array('parts', 'footer_main'),
                                        ),
                            'addons'    => apply_filters('tc_addons_classes' , array() )
                        )//end of array
        );//end of filter

        /* GETS INFORMATIONS FROM STYLE.CSS */
        // get themedata version wp 3.4+
        if( function_exists( 'wp_get_theme' ) )
          {
            //get WP_Theme object of customizr
            $tc_theme                     = wp_get_theme();

            //Get infos from parent theme if using a child theme
            $tc_theme = $tc_theme -> parent() ? $tc_theme -> parent() : $tc_theme;

            $tc_base_data['prefix']       = $tc_base_data['title'] = $tc_theme -> name;
            $tc_base_data['version']      = $tc_theme -> version;
            $tc_base_data['authoruri']    = $tc_theme -> {'Author URI'};
          }

        // get themedata for lower versions (get_stylesheet_directory() points to the current theme root, child or parent)
        else
          {
             $tc_base_data                = get_theme_data( get_stylesheet_directory().'/style.css' );
             $tc_base_data['prefix']      = $tc_base_data['title'];
          }

        /* CUSTOMIZR_VER is the Version */
        if( ! defined( 'CUSTOMIZR_VER' ) )      { define( 'CUSTOMIZR_VER' , $tc_base_data['version'] ); }

        /* TC_BASE is the root server path of the parent theme */
        if( ! defined( 'TC_BASE' ) )            { define( 'TC_BASE' , get_template_directory().'/' ); }

        /* TC_BASE_CHILD is the root server path of the child theme */
        if ( ! defined( 'TC_BASE_CHILD' ) )     { define( 'TC_BASE_CHILD' , get_stylesheet_directory().'/' ); }

        /* TC_BASE_URL http url of the loaded parent theme*/
        if( ! defined( 'TC_BASE_URL' ) )        { define( 'TC_BASE_URL' , get_template_directory_uri() . '/' ); }

        /* TC_BASE_URL_CHILD http url of the loaded child theme*/
        if( ! defined( 'TC_BASE_URL_CHILD' ) )  { define( 'TC_BASE_URL_CHILD' , get_stylesheet_directory_uri() . '/' ); }

        /* THEMENAME contains the Name of the currently loaded theme */
        if( ! defined( 'THEMENAME' ) )          { define( 'THEMENAME' , $tc_base_data['title'] ); }

        /* TC_WEBSITE is the home website of Customizr */
        if( ! defined( 'TC_WEBSITE' ) )         { define( 'TC_WEBSITE' , $tc_base_data['authoruri'] ); }

        /* theme class groups instanciation */
        $this -> tc__ ( $this -> tc_core );

    }//end of __construct()

    /**
    * Class instanciation with a singleton factory :
    * Thanks to Ben Doherty (https://github.com/bendoh) for the great programming approach
    *
    *
    * @since Customizr 3.0
    */
    function tc__ ( $load ) {

        static $instances;

        foreach ( $load as $group => $files ) {
            foreach ($files as $path_suffix ) {
                //checks if a child theme is used and if the required file has to be overriden
                if ( $this -> tc_is_child() && file_exists( TC_BASE_CHILD . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ) {
                    require_once ( TC_BASE_CHILD . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ;
                }
                else {
                    require_once ( TC_BASE . $path_suffix[0] . '/class-' . $group . '-' .$path_suffix[1] .'.php') ;
                }

                $classname = 'TC_' . $path_suffix[1];
                if( !isset( $instances[ $classname ] ) )
                {
                    $instances[ $classname ] = class_exists($classname)  ? new $classname : '';
                }
            }
        }

        return $instances[ $classname ];
    }

    /**
    * Checks if we use a child theme. Uses a deprecated WP functions (get_theme_data) for versions <3.4
    * @return boolean
    *
    * @since  Customizr 3.0.11
    */
    function tc_is_child() {
        // get themedata version wp 3.4+
        if( function_exists( 'wp_get_theme' ) ) {
            //get WP_Theme object of customizr
            $tc_theme       = wp_get_theme();
            //define a boolean if using a child theme
            $is_child       = ( $tc_theme -> parent() ) ? true : false;
         }
         else {
            $tc_theme       = get_theme_data( get_stylesheet_directory() . '/style.css' );
            $is_child       = ( !empty($tc_theme['Template']) ) ? true : false;
        }

        return $is_child;
    }

}//end of class

add_filter('tc_fp_single_display', 'rdc_fp_single_display', 10, 2);
function rdc_fp_single_display($output, $area) {
     return preg_replace('|fp-button"|', 'fp-button fp-button-'.$area.'"',
$output);
}

add_filter('tc_logo_text_display', 'your_logo_display');
add_filter('tc_logo_img_display', 'your_logo_display');
function your_logo_display($output) {
return preg_replace('/brand span3/', 'brand span10 offset1', $output, -1);
}

add_filter('tc_tagline_display', 'rdc_tagline2_display');
function rdc_tagline2_display($output) {
    return preg_replace('|</h2>|', '</h2><h5 class="rdc_tagline2"><a href="mailto:[email protected]">[email protected]</a></h5> ', $output);
}

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li >' . $searchform . '</li>';

    return $items;
}

Behmtt, that is the Customizr functions.php, not a child one. You shouldn’t be adding to that. See this explanation of how to set up a proper functions.php here: https://www.themesandco.com/customizr/how-to-customize-customizr-wordpress-theme/

I got the searchbox in the navbar but now the seachbox is not clickable.
This is the code in the header.php:

<?php
/**
 * The Header for Customizr.
 *
 * Displays all of the <head> section and everything up till <div id="main-wrapper">
 *
 * @package Customizr
 * @since Customizr 1.0
 */
?>
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

    <?php
    if(function_exists('wplb_login')) {
        wplb_login();
    }
?>

	<?php
		//the '__before_body' hook is used by TC_header_main::$instance->tc_head_display()
		do_action( '__before_body' );
	?>

	<body <?php body_class(); ?> <?php echo tc__f('tc_body_attributes' , 'itemscope itemtype="https://schema.org/WebPage"') ?>>

		<?php do_action( '__before_header' ); ?>

	   	<header class="<?php echo tc__f('tc_header_classes', 'tc-header clearfix row-fluid') ?>" role="banner">

			<?php
			//the '__header' hook is used by (ordered by priorities) : TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
				do_action( '__header' );
			?>

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
 <div><input type="text" size="18" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
 <input type="submit" id="searchsubmit" value=">>>" class="btn btn-info" />
 </div>
 </form>
<p class="forhelp"></p>

	</header>

		<?php
		 	//This hook is filtered with the slider : TC_slider::$instance->tc_slider_display()
			do_action ( '__after_header' )
		?>

If i put the code <div class=”navbar-wrapper clearfix row-fluid”> in the header.php the seachbox works but then the menu is not clickable.
Something is going wrong.

Then there is another thing. When i hide the navbox lilke mentioned in the snippet remove-navbar-box the searcbox is vissible and when i want to show the navbox the searchbox is gone.
Here is my site: durksweb.nl.

Hi!

Find this file: class-header-header_main.php.

Find there this line: <div class="navbar notresp row-fluid pull-left">.

Put your form under this line and apply some css as you wish.

Cheers!

behmtt: you should not be editing core Customizr files like this. Did you read the link I gave above?

I don’t really see the solution, as the original website of Sevar dropped.

I’d really like to have such a search bar for my new site.

Thanks a lot.

Hello Sevar,
i did succeed in getting the searchbox in the navbox. But with possitioning the searchbox witch css it was either not clickable or the the menu was not clickable. So i give up and placed the searchbox in the footer.

Hi!

All changes must be done only by means of a child theme.

The file must be copied and placed into the child theme directory and the changes be made there.

If you couldn’t succeed with having it in the navbox working maybe your theme isn’t updated.

Hello – I used the php and CSS in my child theme as instructed above and it is really close but the search bar is a little above my menu items. What do I need to fix to make it line up?
https://www.joe-the-baker.com