Search in Ubermenu not functioning after 6.1.5

Support
#1

I have a search item in my uber menu. After updating to x-theme 6.1.5, Cornerstone 3.1.5 and ubermenu 3.4.0.1, it stopped working. It is controlled by a function in my childtheme. After the update it treats the anchor as a normal anchor pointing the “#”. Before it opened a search overlay.

I understand things change, so I’m happy to go in a different direction, but I’d like some help on either fixing the existing setup or building an equivalent.

   function x_navbar_search_navigation_item( $items, $args ) {

       if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
       if ( $args->theme_location == 'ubermenu' ) {

  if ( ! class_exists( 'UberMenu' ) ) {

    $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
              . '<a href="#" class="x-btn-navbar-search">'
                . __( 'Search', '__x__' ) . '</span></span>' . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span> '
              . '</a>'
            . '</li>';
  } else {
    $items .= '<li class="ubermenu-item ubermenu-item-level-0 x-menu-item x-menu-item-search">'
              . '<a href="#" class="x-btn-navbar-search ubermenu-target">'
                . __( 'Search', '__x__' ) . '</span></span>' . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span> '
              . '</a>'
            . '</li>';
  }
 }
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
#2

Hi @Parkinson_Canada,

Thanks for writing in.

Not sure where to start to. Would you mind sharing us your admin credentials so we could check further.

Don’t forget to set it in a secure note.

Thanks.

#3

The site is parkinson.ca/admin

#4

Let me know if you are going to make any big changes. I might move you over to our dev site, so we can test things without being live.

If you go to the dev site, you’ll see the feature working. It’s an older version of the site before doing many updates.

It also still works in mobile.

#5

Hello There,

To resolve your issue, please do the following:

1.) Please update the Custom Search Navigation in your child theme’s functions.php file. You need to use this code:

// 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="&#xf002;" 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 menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span class="ubermenu-target"><i class="x-icon-search" data-x-icon="&#xf002;" 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 );
// =============================================================================

2.) And you need to remove this line in your custom JS in the Theme Options custom JS section:

// add ubermenu class to fix search styling but keep functionality
  $('.x-btn-navbar-search').addClass('ubermenu-target');

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

#6

Thanks so much for the help. The solution was a mix of the new version you sent and the original. I had to keep the jquery function that adds the class “ubermenu-target” to the anchor to keep the alignment correct. If I add it manually, it was aligned correctly, but doesn’t function by opening the search. I guess it’s something to do with the timing of when the class is added.

Also, the menu location isn’t primary, it’s called ubermenu on my site. I also need the word “Search” to the left of the icon, so I moved it. These are pretty minor.

I still a little puzzled as to why it stopped working in the first place. The end solution isn’t too different from how it was set up originally. What difference did you spot? How does the search work? Is it the data-x-icon attribute?

Here’s the function that now works:

function x_navbar_search_navigation_item( $items, $args ) {

if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
if ( $args->theme_location == 'ubermenu' ) {

  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="&#xf002;" 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 menu-item x-menu-item x-menu-item-search">'
              . '<a href="#" class="x-btn-navbar-search">'
                . '<span> ' . __( 'Search', '__x__' ) . '</span>'. '<i class="x-icon-search" data-x-icon="&#xf002;" aria-hidden="true"></i>'
              . '</a>'
            . '</li>';
   }
}
}

return $items;

}
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
#7

Hi there,

I checked and I’m not sure either, it’s not even connected to the updates. But yes, adding it through javascript has varying effect since loading speed varies too. And your javascript is executed earlier before the element is added. Let’s add some delay to your script.

jQuery ( document ).ready( function($) {

setTimeout( function() {

$('.x-btn-navbar-search').addClass('ubermenu-target');

}, 750 );

} );

Thanks!

#8

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