Copy x/framework/views/global/_navbar.php to x-child/framework/views/global/_navbar.php search for </nav> and paste code below just after that line.

<div class="custom-search">
	  <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

	      <label class="visually-hidden" for="s"></label>
	      <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
	      <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

	  </form>
</div>

Final file should look like following

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Includes navbar output.
// =============================================================================

$get_name          = get_bloginfo( 'name' );
$get_description   = get_bloginfo( 'description' );
$x_logo            = get_theme_mod( 'x_logo' );
$has_primary_nav   = has_nav_menu( 'primary' );
$one_page_nav_meta = get_post_meta( get_the_ID(), '_x_page_one_page_navigation', true );
$one_page_nav      = ( $one_page_nav_meta == '' ) ? 'Deactivated' : $one_page_nav_meta;

?>

<div class="x-navbar-wrap">
  <div class="<?php x_navbar_class(); ?>">
    <div class="x-navbar-inner x-container-fluid max width">
      <?php if ( is_front_page() ) : echo '<h1 class="visually-hidden">' . $get_name . '</h1>'; endif; ?>
      <a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $get_description; ?>">
        <?php echo ( $x_logo == '' ) ? $get_name : '<img src="' . $x_logo . '" alt="' . $get_description . '">'; ?>
      </a>
      <a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-collapse">
        <i class="x-icon-bars"></i>
        <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
      </a>
      <nav class="x-nav-collapse collapse" role="navigation">

        <?php

        if ( $one_page_nav != 'Deactivated' ) :
          wp_nav_menu( array(
            'menu'       => $one_page_nav,
            'container'  => false,
            'menu_class' => 'x-nav x-nav-scrollspy sf-menu'
          ) );          
        elseif ( $has_primary_nav ) :
          wp_nav_menu( array(
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu'
          ) );
        else :
          echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';
        endif;

        ?>

      </nav> <!-- end .x-nav-collapse.collapse -->
<div class="custom-search">
	  <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

	      <label class="visually-hidden" for="s"></label>
	      <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
	      <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

	  </form>
</div>
    </div> <!-- end .x-navbar-inner -->
  </div> <!-- end .x-navbar -->
</div> <!-- end .x-navbar-wrap -->

Add following line of code to Customizer → Custom → CSS

.custom-search{
color: #0157A8 !important;
float: right !important;
font-size: 18px !important;
margin: 20px 5px 0 10px !important;
width:20%;
}

Black triangle with black sign is to show widget bar.To add content in widget bar go to Appearance → Widgets and place whatever widget you want to appear there in Header Widget Area #1 and Header Widget Area #2 that will appear when you click that little plus icon on the triangle on top.

Screenshot: http://prntscr.com/38e3vb

You can add up to 4 widgets in widget bar to choose the number of widgets go to Customizer → Header → Header Widget Areas and choose the numbers.

There you can also adjust the widget bar button’s background color and hover color.

Screenshot: http://prntscr.com/38e4yp

Thanks

Just guide me where i find this
Thanks

You need edit those files via FTP or your cpanel. If you’re not comfortable doing this yourself, look for services such as Microlancer or Tweaky for assistance.

Cheers!

1. Does not display in top menu bar
2. You can click to enter text and search

Let me know what info you need to debug, thank you.

can you provide us with the address of the site so we can take a look at it to properly help you. Otherwise it would be a lot of guessing what’s going wrong. Thanks!

Thanks for updating this thread! The solution given on this thread is a bit older. In our latest X version, you can simply activate the search functionality for the navbar. If activated, an icon will appear that when clicked will activate the search modal. By default it is disabled. You can turn it on by going to Appearance > Customize > Header > Search.

Hope this helps.