Docs

[GeorgiaG]

Hello. I tried to address this with other solutions I found in the knowledge base but it did not do the trick. I would like to keep this in the menu or add it to the top bar by the social icons like so:

search icon | social, social, social

Can you help me? The preferred outcome is to keep it in the menu. Thank you.

http://c0e.65e.myftpupload.com/

[Rue Nel]

Hi There,

Thanks for writing in! The search and cart menu icon is a bug which is being displaced when Ubermenu is active. To fix it, since the child theme is set up, please add the 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 );
// =============================================================================

Please copy the raw code from here (http://pastebin.com/9kkh3Emg) to preserve the unicode html entities or the data-x-icon value.

Please let us know if this works out for you.

[MMR5280]

I had the same problem and tried this so the search icon is now aligned with the menu, but it is broken. It does nothing when you click it.

[Jade]

HI there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[MMR5280]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the url of your site. The search icon does nothing because there is a JS error on the page. It is caused a by script loaded by UberMenu. To resolve this, please go to Appearance > UberMenu settings under General Settings>Assets. You must uncheck “Load Goggle Maps API”.

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

[MMR5280]

Hi, Unfortunately unchecking “Load Google Maps API” did not fix it.

(Side note: I am not currently using a caching plugin so nothing is cached. Tested in several browsers also).

[Rue Nel]

Hello There,

Thanks for updating in! To resolve this issue, we need to have a JS script that will trigger the search form overlay. Please add the following JS code in the customizer, Appearance > Customize > 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 this helps. Kindly let us know.

[MMR5280]

That worked, however, there is no way to exit the search overlay without hitting esc. (Not all users know about hitting escape, so it would be nice to make it work like the example below).

For example, on this site (not using ubermenu) http://violentzen.com/, when you click search in the menu the overlay comes up but you only need to click off of it (or hit esc) and it disappears.

[Rad]

Hi there,

Let’s close button, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

  .x-searchform-overlay-inner:before {
  content:"x";
  position: absolute;
  top:10px;
  right: 20px;
display: block;
padding: 3px 10px;
background:rgba(255,255,255, 0.1);
border-radius: 100px;
   cursor: pointer;
    cursor: hand;
  }

Hope this helps.

[MMR5280]

Added the css but it didn’t work. :/

[Christopher]

Hi there,

Please see the attachment, the code works fine.

Thanks.

[MMR5280]

Violentzen.com is not the site in question.

I need it to work with uber menu on http://dev.medicalmassageoftherockies.com/

[Rue Nel]

Hello There,

Thanks for updating in! Please have the given JS code updated and make use of this code:

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) {
    e.preventDefault();
    if ( ! $(e.target).hasClass('search-query') ) {
      clearSearch();
    }

    $formWrap.toggleClass('in');
  });

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

});

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

[MMR5280]

That worked. Thank you for all the help. 🙂

[Author]

Posts