Search icon/top bar

[gehess]

Hey guys,

i need some help achiving a search icon in my topbar, using X renew stack.
I tried the solution mentioned here together with the modification of functions.php:
https://theme.co/apex/forums/topic/search-icon-and-functionality-in-the-top-bar/#post-717826
The search icon appears indeed, hover effect works aswell, but no effect while clicking on it.
I´d love to have the search icon in the top bar instead of navigation bar. Any suggestions?
Thanks in advance!

[ruenel]

Hello @Hessner,

Thanks for writing in! You will need to load the modal search also so that after clicking the icon the modal search popup will display. Assuming that 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() { ?>

      <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', 'x_navbar_searchform_overlay' );
endif;

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

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

[gehess]

That´s it! I found several codes in your forum, but not this code! Thank you so much!!!
For anybody who might be interested: add this to your topbar content:

<a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="&#xf002" aria-hidden="true"></i></span></a

[rad]

You’re most welcome and thanks for sharing