How to hard code an item to load the full screen search

Hi there, is there a way to give a bit of text a link to load the full screen (overlayed) search function rather than adding a search item to the menu?

Hello There,

Thanks for writing in! Because what you are trying to accomplish requires a template customization, we would highly 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
// =============================================================================

function custom_x_navbar_searchform_overlay() { ?>

    <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 &ldquo;enter&rdquo; 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 }
add_action( 'x_before_site_end', 'custom_x_navbar_searchform_overlay' );

The code above will embed the search overlay. You still need something that a user can click one to trigger the display of the search overlay. In order to do that, you might need to a bit of text a link to load. Simply add a link text code like this:

<a href="#" class="x-btn-navbar-search">Looking for something?</a>

Or if you prefer a button element, simply add a custom x-btn-navbar-search class in your button element > Customize settings.

We would loved to know if this has work for you. Thank you.

1 Like

Thank you so much!

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.