Docs

[2342J]

Hi again,
When I enable search in the customizer the icon appears below the menu (while using ubermenu) – this is not enabled right now because I want to resolve our previous ticket first. I just wanted to document it so that I don’t forget. I’ll reply to this thread when I turn it on for you.

[Thai]

Hi There,

I couldn’t find the search button in your navbar.

Could you please add it again?

http://i.imgur.com/rU8woSd.png

Thanks.

[2342J]

Hi Thai,
I closed out the other ticket and have re-enabled the navbar search. Take a look at it. The login credentials from the previous ticket will work for you here as well.

[Jade]

Hi Landon,

You can add this under Custom > CSS in the Customizer.

.x-menu-item-search {
    float: right;
    padding-top: 18px;
}

Hope this helps.

[2342J]

Ooh, wow. Works. Thanks!

[Lely]

You’re welcome Landon!

Cheers!

[2342J]

Oh, one more thing. On the mobile menu the search button appears at the bottom as cut off. Can you tell me how to fix that as well as edit the before click color?

[Rue Nel]

Hello There,

The search menu icon were displaced when UberMenu is active. To really fix your search menu icon, since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Custom Search Navigation 
// =============================================================================
function x_navbar_search_navigation_item( $items, $args ) {
    
  if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
    if ( $args->theme_location == 'primary' ) {

      if ( ! class_exists( 'UberMenu' ) ) {

        $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>';
      } else {
        $items .= '<li class="ubermenu-item ubermenu-item-level-0 x-menu-item x-menu-item-search">'
                  . '<a href="#" class="ubermenu-target 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 );
// =============================================================================

You might need to remove the css code we gave to you in the previous reply.

Hope this helps. Please let us know how it goes.

[2342J]

That puts the search where it belongs in both the desktop and mobile, but when clicking on the icon it doesn’t activate the search function.

[Rue Nel]

Hello There,

Thanks for the updates! The search overlay should appear upon clicking on the search icon. In your case, it does not happen because there were some JS error on the page. This error is because of the Google map API key. Please disable this api key in the Ubermenu settings. You may go to Appearance > UberMenu > General Settings > Assets. You must disable the “Load Google Maps API” option. Please see this screenshot: http://prntscr.com/crkols

If still nothing works out, would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue?

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[2342J]

This reply has been marked as private.

[2342J]

I disabled the Google Maps API, but it’s still not working.

[Paul R]

Hi,

To fix the search, you can add this in your Custom > Edit Global Javascript.

jQuery(function($) {

  var $trigger  = $('.x-btn-navbar-search');
  var $formWrap = $('.x-searchform-overlay');
  var $input    = $formWrap.find('.search-query');
  var escKey    = 27;

  function clearSearch() {
    $formWrap.toggleClass('in');
    setTimeout(function() { $input.val(''); }, 350);
  }

  $trigger.on('touchstart click', function(e) {
    e.preventDefault();
    $formWrap.toggleClass('in');
    $input.focus();
  });

  $formWrap.on('touchstart click', function(e) {
    if ( ! $(e.target).hasClass('search-query') ) {
      clearSearch();
    }
  });

  $(document).keydown(function(e) {
    if ( e.which === escKey ) {
      if ( $formWrap.hasClass('in') ) {
        clearSearch();
      }
    }
  });

});

Hope that helps.

[2342J]

That had no effect.

[Rad]

Hi there,

Your added javascript is incomplete,

      uery(function($) {

  var $trigger  = $('.x-btn-navbar-search');
  var $formWrap = $('.x-searchform-overlay');
  var $input    = $formWrap.find('.search-query');
  var escKey    = 27;

....
..

Should be

      jQuery(function($) {

  var $trigger  = $('.x-btn-navbar-search');
  var $formWrap = $('.x-searchform-overlay');
  var $input    = $formWrap.find('.search-query');
  var escKey    = 27;

....
..

Thanks!

[Author]

Posts