How do I add search bar in the header ???

H smayurika. Give this a try. You’ll need to be running a child theme to safely modify the theme file. If you don’t currently have a child theme:

1. In Theme Options click the Help tab in the upper righthand corner.
2. One of the options in the list is to download a sample child theme. This downloads the theme zip file to your local computer.
3. Install the new theme in your Admin panel by selecting Add New > Upload Theme > Choose File, then select the zip file you downloaded.
4. Activate the child theme.
You’ll now have a pre-configured child theme with a style.css file and functions.php file to which you can add customizations.

Then copy the header.php file from the parent theme to your child theme.

1. In the topbar section of header.php, find this block of code:

<div class="container">
	<div class="container-inner">
		<div class="toggle-search"><i class="fa fa-search"></i></div>
		<div class="search-expand">
			<div class="search-expand-inner">
				<?php get_search_form(); ?>
			</div>
		</div>
	</div><!--/.container-inner-->
</div><!--/.container-->

2. Near the end of the file find the nav-header section:

<?php if ( has_nav_menu('header') ): ?>
	<nav class="nav-container group" id="nav-header">
		<div class="nav-toggle"><i class="fa fa-bars"></i></div>
		<div class="nav-text"><!-- put your mobile menu text here --></div>
		<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
	</nav><!--/#nav-header-->
<?php endif; ?>

3. Paste the block of code from #1 just above the </nav><!–/#nav-header–> line. Notice that the first <div> of the searchbar section also has an additional class name:

<?php if ( has_nav_menu('header') ): ?>
	<nav class="nav-container group" id="nav-header">
		<div class="nav-toggle"><i class="fa fa-bars"></i></div>
		<div class="nav-text"><!-- put your mobile menu text here --></div>
		<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

		<!-- add searchbar in header -->
		<div class="container my_header_searchbar_container">
			<div class="container-inner">
				<div class="toggle-search"><i class="fa fa-search"></i></div>
				<div class="search-expand">
					<div class="search-expand-inner">
						<?php get_search_form(); ?>
					</div>
				</div>
			</div><!--/.container-inner-->
		</div><!--/.container-->

	</nav><!--/#nav-header-->
<?php endif; ?>

4. Add this to your custom css:

/* push to right side and up above menu */
.my_searchbar_container {
  float: right;
  margin-top: -50px;
}
/* push searchbox left and up */
.my_searchbar_container .search-expand {
  margin-right: 58px;
  margin-top: -50px;
}
/* smaller searchbox border */
.my_searchbar_container .search-expand-inner {
  padding: 5px;
}

5. You’ll most likely also have to work up some css to handle the searchbar in responsive mobile views.

Thank you so much.I really appreciate this theme and support.

You’re welcome. If you don’t need any further assistance with this topic please mark it as Resolved. Thanks.