Ubermenu is blank on mobile

[capodanno]

My Ubermenu is blank on mobile devices. It seems like the items are still there (I can click on them to visit pages) but they are invisible. Maybe it’s a style sheet issue? Please help!

I suspect this problem started a month ago, when I created a new Pro header (although I just used the same Ubermenu that was working properly before, just adding it to a widget according to your instructions).

Thank you!

[capodanno]

I think you’ve answered someone else’s question here. Please respond about my Ubermenu issue.

[tristup]

Hi @capodanno,

Really sorry for the confusion, the another answer might have overridden your one. Please find the answer below.

I have checked your website and menu and found that is loaded into the Mobile but the Menu Item text is not visible for some reason. I suspect there might be some different reasons behind your issue, I would like to suggest troubleshooting the following common issue to help us to recognize the reason.

1.Theme Related Issue
2.Plugin Conflict
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps, please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[capodanno]

Thank you. I have followed your steps, and can report the following:

1.Theme Related Issue

When I switched to the Twenty Twenty-One theme, the menu reappeared on mobile. Meaning the issue is theme related.

According to the instructions: If the problem goes away, it is something related to the X or Pro theme, and you should continue the troubleshooting.

2.Plugin Conflict

Deactivated all plugins, including Ubermenu:

Of course, No menu appears at all.

Deactivated all plugins, except Ubermenu:

Problem persists on mobile (menu is still blank)

3.Theme Update related issue

Theme is already updated.

4.Child Theme Related issue

When switching to the parent theme, the problem disappeared. I don’t see anything in the customizations that have anything to do with Ubermenu. Could you take a quick peek? (I’ll post that code in the secure note, for your convenience).

5.CSS/JS Customization

CSS – didn’t change the behavior

JS – there aren’t any customziations

6.Disabling Cache

N/A

7.Disabling CDN

N/A

[capodanno]

One more thing: before we place the blame on any customizations in my child theme functions.php file, I want to mention that I removed all content from that file, and the problem still persisted.

Thanks!

[tristup]

Hi @capodanno,

It will be very difficult to recognize the problem by investigating the code you have pasted here. Giving support on custom code or modified child theme is beyond the scope of Theme Support, I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[capodanno]

I know it’s easy to blame my customizations. In order to again prove that the customizations weren’t the issue, I was going to delete the child theme, and reinstall it (without any customizations.)

I didn’t have to get that far. As soon as I changed to the Pro theme and deleted the child theme, the Pro (parent) theme is having the same problem. I stopped there, and didn’t bother to re-add the empty child theme. In my original test, the problem did disappear when I switched to the parent theme, but now it’s also happening with the parent theme.

PLEASE NOTE THIS TESTING IS HAPPENING IN THE STAGING SITE I GAVE YOU, not the live site.

I appreciate your followup.

[tristup]

Hi @capodanno,

It is not about blaming the customization in your child theme, as per your troubleshooting it has been already proved that the child theme is the reason.

@capodanno

When switching to the parent theme, the problem disappeared.

Now it will be very difficult to investigate the code you pasted here and also it is beyond the scope of our Theme Support. Please remember that we don’t provide any support to the custom coding or modified child theme. I would suggest you activate the Parent Theme and deactivate all the plugins and if you find the same issue, please let us know, we will be there to help you out.

Thanks

[capodanno]

I no longer have a child theme installed. The problem continues. So I don’t see how the child theme can be the problem?

[tristup]

Hi @capodanno,

I have investigated your staging thoroughly and found there might be some CSS that is affecting the Uber Menu alignment and that is why the Menu Items goes outside the screens for the smaller one. I have checked the following custom CSS code and added it into the Theme Options > CSS and now the menus are showing.

@media screen and (max-width: 959px)
{
    .ubermenu-items-align-center, 
    .ubermenu .ubermenu-item,
    .ubermenu-responsive-default.ubermenu-responsive.ubermenu-items-align-center
    {
    text-align: center !important;
    }
}

NOTE: Please remember that code worked where all other plugins are deactivated and no other custom CSS is overriding it.
Thanks