Invisible Menu on some devices

Im getting some errors with the menu not showing up on a mac laptop but the menu item is still clickable. Its like the menu words for header and footer are invisible but on my side its fine and works but my client cant see it on his iPhone or his laptop. It works on my mac desktop. What could be be the issue?

Hi @rotation,

Thank you for writing in, maybe you have an unclose CSS @media query that messes up the color of your menu on certain screens. Please check your entire custom CSS here and resolve all found errors.

If the issue persists please provide us the site URL so we can take a closer look.

Cheers!

ill try this link

Hi @rotation,

Thank you for the credentials, but I can’t replicate the issue, I check the header and the “hide base on breakpoints” settings seem fine.

Please ask your client to test in the private mode of his browser where there is no caching and browser add-ons involve.

Thanks,

seems like it was localized issue. Thanks

Hi @rotation,

Cool, did you figure out what is causing the issue on your client end? Can you share it here?

Thanks,

Not really it seems it was some cache issue. It looks good on all other computers and cell phones. Weird

Yup, more likely a cache related issue. Let us know if something comes up.

Thanks,

I cant see the menus on Safari or Apple phone - can you tell me what you see.

Hi @rotation,

I checked the case with Safari, and the menu is not showing. I copied the header and assigned it to a sample page and tried to test. I found out that the Navigation Inline element whos the menu item when you set the menu to be other than the Main Menu.

So the problem must be inside the Main Menu. Please go to Appearance > Menus and check every item of the main menu and see if there is any kind of strange or abnormal thing going on.

Thank you.

Im not sure what would be the issue since it works on firefox and chrome but not safari or iphones. This is weird. Both footer and main menu are affected.

Hello @rotation,

I have investigated your site further and I found out that you have inserted invalid HTML codes.
You added this inside a headline element which is already using <h1></h1>:

<h1 style="text-align: center;"><strong><span style="color: #000000;">This hemp-based CBD rich product contains ZERO THC - corporate + government safe.</span></strong></h1>

You cannot nest or insert a heading tag inside a heading tag.

You also added this h5 inside an h1:

<h5 style="text-align: justify;"><strong><span style="color: #000000;">Canna Base Drops CBD beverage enhancer is an ultra-potent cannabidiol (CBD) formula - the only CBD product using True nanoCBD. TASTELESS so you can add it to any drink or beverage to promote body + mind + mood health, used to enhance any lifestyle.</span> </strong><strong></strong></h5>

You will need to update it and use this:

<strong><span style="color: #000000;">This hemp-based CBD rich product contains ZERO THC - corporate + government safe.</span></strong>
<strong><span style="color: #000000;">Canna Base Drops CBD beverage enhancer is an ultra-potent cannabidiol (CBD) formula - the only CBD product using True nanoCBD. TASTELESS so you can add it to any drink or beverage to promote body + mind + mood health, used to enhance any lifestyle.</span> </strong><strong></strong>

If you need to center or justify the contents, please use the “Text Align” option in the Text Style section of the element settings.

Once these are fixed, we can revisit your menus. This is important because broken HTML codes will mess up other elements or even broken the page.

Please let us know how it goes.

Ok I only used the pro page builder and the page builder to adjust any text I did not insert HTML code to make the text do anything outside of the page builder and the tools in pro. How can I fix this?

Hello @rotation,

If you haven’t inserted the HTML code, most probably you have copied the text from somewhere and when you paste it, the HTML codes were included. Well anyways, you can edit your page and remove the unnecessary code. You can actually do it by switching to HTML view.

Once you remove the heading tags, you will have to adjust the font sizes in the Text Format section.

After removing the codes, please check your menu again since the broken HTML is now fixed.

Please let us know how it goes.

Ok I have edited the code and safari still shows no menu words on all 3 menus mobile and desktop how can we fix this ? The other 2 browsers work fine.

Can anyone help with his issue?

That is strange I also get the same error again in Safari and the menu is not showing. I need to investigate and that might involve disabling the plugins and adding things here and there which is not suitable for a live site.

Would you please kindly contact your hosting service provider and ask them to duplicate the current website as a staging website and then give us the URL and login information to be able todo the tests without the fear of affecting the live website?

Thank you.

Ok this has been created ill send login info

Hi Rotation,

Thank you for the information. Unfortunately, I could not enter the admin of the test website. It reloads teh login page. Would you please check why this is happening?

Thank you.

Please try now I tested it, it works - same login info.