Docs

[johnlednicky]

When hovering over some of my menu options some of the sub menu items are being cut off the screen. I have my menu on the left of my screen and so it’s some of the bottom options sub menus that are going off the screen and being cut off. What do I need to do to fix this?

[Christian]

Hey John,

Please go to Appearance > Customize > Header and turn off Navbar Scrolling.

Thanks.

[johnlednicky]

I already have that turned off. My site is http://johnlednicky.com/ if you want to see. I’m not sure if maybe some of my custom global css code has messed it up?

[Rupok]

Hi there,

Thanks for writing back. It seems fine on my end. Would you point us with a screenshot that which is cut off?

Cheers!

[johnlednicky]

That’s because I had just switched to UberMenu to alleviate the issue. So I’ve moved my site to production which is st-boniface.com and I need some help on another menu issue. I wanted to remove the logo when on mobile devices and found in forums to add this custom CSS:

@media only screen and (max-width: 767px) {
.x-navbar .x-brand {
display: none;
}
}

That removed the logo but kept the height of that section to the same as if the logo was there. How to I remove the overflow and then just have it expand when menu is clicked?

Thanks,
John Lednicky

[johnlednicky]

I apologize I was able to figure out this issue but I do need help with the search icon displaying incorrectly at the bottom.

Thanks,
John Lednicky

[Rue Nel]

Hello John,

The search icon is a known issue when UberMenu is active. Our developers already knew about this. It will be updated when we roll out our next release update. To fix this issue temporarily, this would require you to have a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

To resolve your search icon, assuming that you already have a child theme, simply 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 let us know if this works out for you.

[johnlednicky]

I created the child theme and added the above code. However, the search option still extends past the container in mobile view. So when you try to click it nothing happens.

[Rue Nel]

Hello There,

Thanks for the updates! To resolve the issue in your menu on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media screen and (max-width: 959px){
  .site .ubermenu-responsive-default.ubermenu-responsive {
    max-height: 900px;
  }
}

Please let us know if this works out for you.

[johnlednicky]

I have my logo hidden for mobile and that made the section’s height too large before the menu was expanded. It did make the search fit inside the section though. I did realize though that there’s a bigger issue. The last code I added when I created the child theme made the search function stop working all together on both mobile and desktop. When you click the icon nothing happens.

[Rue Nel]

Hello There,

Thanks for the updates! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? 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.

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.

[johnlednicky]

This reply has been marked as private.

[Lely]

Hi John,

I can see the following error on your console that might stop search from working since it invoke via javascript too:

js:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.ib @ js:34
2sh.81a142d….html:1 Uncaught TypeError: (t.data || "").search is not a function

Ubermenu is loading Google MAP API too. Please disable it because it is loaded by the them already. Go to Ubermenu Control Panel > General Settings Tab > Assets > Load Google Maps API: Uncheck this
The second error is coming from your Addthis code. Please also check that out.

[johnlednicky]

I disabled Google MAP API from loading in Ubermenu. I also deactivated the Addthis plugin completely. But the search button still doesn’t function.

[Rue Nel]

Hello There,

I managed to resolve the issue. You mobile menu is looking great now and the search should be working. The search was not working because of the JS error generated by your Google analytics script that you have added. And by the way, please always make sure to purge Varnish or perhaps temporarily disable it so that all the changes you made will take effect on the frontpage immediately. You can reactivate it once everything is done.

If still nothing is working, you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope this helps.

[Author]

Posts