Invisible Main Menu / Footer Menu - On Safari + Safari Mobile - In PRO

[rotation]

Im Using Pro I cant see any menu Items for main Menu or the footer menu’s it’s totally blank boxes or blank header area’s
This only is happening in Safari Not Chrome or Firefox. Not sure about Internet Explore browser.

The menu items seem to become the same color as the background only for Safari bowser.

Any Ideas how to fix this ? Since the site is under construction now and not live, I have created a staging subdomain so nothing can be damaged from the real dev. site. This is a copy of the real site and the real dev site is backed up. I tried deleting not used plugins, i updated all plugins, I deactivated all plugins nothing worked, still no menu all 3 menus footer, main menu, mobile versions. I tried this on the test site. I actually turned off maintenance mode for the test dev site. I think this has to do with pro header builder, I switched back to regular header and I can see the header. This makes me think its not a plugin since i turn them all off to test this and nothing changed.

Update: I turned on the graphic for the menu Then I could see the menu in Safari. Why ? What Am I missing in my settings ?

Update #2 After playing with all the text settings - still with graphic ON, now the hover interaction is half the color in Safari ONLY. really weird. How can i fix this ? + All mobile menus do not work. Or Footer Menu.

[rad]

Hi @rotation,

Thanks for reaching out.

It appears to be using a custom font that aren’t supported by Safari. I recommend using another font for your menus. It works after turning off your custom font.

Thanks!

[rotation]

Where should I change the font for menu’s, in theme settings options? Or Pro header editor ? And Is this going to work for footer menu and mobile menus? Whats the issue Safari or whats the issue Pro Header editor?
And Why when I add an Images in the pro header editor -to the main Menu Safari can now see the custom font in header but not mobile menus? You gotta give me more of a reply then that, The brand Needs to be able to use a custom font for all menus.

I added a image - a hand icon to the burger menu now I can see it on Safari, With a custom font. Why? I also made the image icon the same color as the background so you cant see it. There is a issue the text is half way highlighted when you roll over. How can We fix This?

Can you take a look at this.

The halftone font interaction highlight - NOT cool., How can I fix this?

see it here better - this is the footer menu - with image so you can see text on Safari

[rad]

Hi @rotation,

You could change it through Theme Options since it’s a custom font, or simply assigned new font template to your header menu element. You can change it according to your preferred workaround, just as long as the font for the menu should be different from what its current font. The issue is because the custom font isn’t supported for Safari, please use another font (google font).

That’s what I saw when troubleshooting it, and I can’t provide any other information since I’m not familiar with the font restriction of your custom font, each custom font could have their own limitation depending on who creates it. Maybe turning the icon on displays back the texts with a different font rendering (could be a fallback font). All I know was based on my troubleshooting and using another font fixes the issue. But if you don’t wish to change the font then yes, you may also display the icons.

I saved a video recording of the issue and the URL is in the secure note.

I checked again and appears you already fixed the font and it’s now displaying okay. And I don’t see any interaction issue

Have you fixed it as well?

Thanks!

[rotation]

Ok thanks for explaining that it is a font issue and safari doesn’t like the font. Pretty weird workaround that I used.
Explain this why is only the menu’s effected we are using the same font for all the site body of text. This why I think the issue is with the header and footer builder.

No the issue with the interaction color is still a issue I just made the color so light that it is hard to see. I’ll change it to a brighter color. Then you will see the issue on the dev sight. Please take a look at the link.

[rad]

Hi @rotation,

The issue is only present in the menu which probably a glitch due to a combination of issues (styling, font, and structure). And since we can’t change the structure nor changing the styling has no effect for the menu, then the last option that I recommended is just changing the custom font. Those are just based on my investigation and only happens on your site and I couldn’t reproduce this on all my installation. There could be contributing factors other than the custom font but hidden, the solution, for now, is changing the custom font. I’m sorry if I can’t answer why as I myself isn’t sure what’s really happening on your site and with Safari, but one thing for sure, custom font rendering plus Safari glitch has a role in the said issue, which of course doesn’t have any issue on other parts.

And it seems you’re changing your site so we couldn’t really see what you were referring to the screenshots and causing more confusion. For now, please don’t change anything and let us check it first. But I went ahead and checked it again, it still the same the way I saw it yesterday. The menu item has no half highlight, and this is the screenshot from the actual tablet, compared to Mac Safari, they are the same.

I’ll continue checking, and these issues are seems weird and only specific to your site.

Thanks!