Hello There,
Thanks for writing in! Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Navbar Searchform Popup
// =============================================================================
if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
function x_navbar_searchform_overlay() {
if ( x_get_option( 'x_header_search_enable' ) == '1' && is_user_logged_in() ) :
?>
<div class="x-searchform-overlay">
<div class="x-searchform-overlay-inner">
<div class="x-container max width">
<form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s" class="cfc-h-tx tt-upper"><?php _e( 'Type and Press “enter” to Search', '__x__' ); ?></label>
<input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
</form>
</div>
</div>
</div>
<?php
endif;
}
add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
endif;
// Navbar Search Navigation Item
// =============================================================================
if ( ! function_exists( 'x_navbar_search_navigation_item' ) ) :
function x_navbar_search_navigation_item( $items, $args ) {
if ( x_get_option( 'x_header_search_enable' ) == '1' && is_user_logged_in() ) {
if ( $args->theme_location == 'primary' ) {
$items .= '<li class="menu-item x-menu-item x-menu-item-search">'
. '<a href="#" class="x-btn-navbar-search">'
. '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
. '</a>'
. '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
endif;
Hope this helps. Please let us know how it goes.