https://theme.co/x/member/forums/topic/how-to-add-search-in-menu-bar/#post-31512

Any suggestions? Thanks!

Create _navbar.php file under YOUR CHILD THEME -> framework -> views -> global and add this code in there:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <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>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <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>
      </div>
    </div>
  </div>

<?php endif; ?>

Please add the following CSS under Customize -> Custom -> CSS :

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

Hope it helps.

Please open your issue in a separate thread and give us your URL and WordPress admin there so we could investigate maybe your setup is different.

Thanks.

Also, when I search for something there is a huge gap between the navbar and the first search result. My childtheme navbar.php info is below for reference

Thanks, Josh

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        <!-- .custom-social-icons -->
        <div class="logobar-social">
          <a href="http://www.facebook.com/expeditiondocs">
            <img alt="Facebook" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/facebook.png" width="35" height="35" />
          </a>
          <a href="http://www.twitter.com/expeditiondocs">
            <img alt="Twitter" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/twitter.png" width="35" height="35" />
          </a>
          <a href="https://www.linkedin.com/profile/view?id=130267670">
            <img alt="LinkedIn" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/linkedin.png" width="35" height="35" />
          </a>
          <a href="http://www.instagram.com/expeditiondocs">
            <img alt="Instagram" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/instagram.png" width="35" height="35" />
          </a>
          <a href="mailto:expeditiondocs@gmail.com">
            <img alt="Email" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/email.png" width="35" height="35" />
          </a>
          <a href="http://www.expeditiondocs.com/feed">
            <img alt="RSS" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/rss.png" width="35" height="35" />
          </a>
        </div>
        <!-- /.custom-social-icons -->
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <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>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
<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>
    </div>
  </div>

<?php endif; ?>

Thank you for writing in!

Please replace above provided CSS code with following:

.custom-search {
    color: #0157A8 !important;
    font-size: 18px !important;
}

@media (min-width: 980px) {
    .x-nav-wrap.desktop {
        vertical-align: middle;
        display: inline-block;
    }

    .x-navbar-inner {
        text-align: center;
    }

    .custom-search {
        margin: 0px 5px 0 10px !important;
        width: 20%;
        display: inline-block;
        vertical-align: middle;
    }   
}

@media (max-width: 979px) {
   .custom-search {
       display: block;
       width: 100%;
       margin-bottom: 10px !important;
       margin-top: 10px !important;
   }
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.