The menu may not be missing, but purely shifted off the page or something like that. You need to look in the developer console, and possibly tweak the css to see what you can do to make it appear.

I often find the difference between browsers is where they need a clearfix ( style="clear:both" ), applied either in an existing element or in an empty div element.

For example, firefox requires a lot more clearfixing than chrome does when I create a tabbed interface.

Hi,

Thank you for the reply.

I forgot to mention this is in a global area as well. Tweaking the CSS would most likely result in a different layout than intended, no? It's only happening in Safari.. Just the menu bar is missin but links and stuff are working fine.

Can we see a link to look at the problem?

JohntheFish is right. Inspecting the elements, I found that the style="display: none;" was added automatically.. The style is not there on the other browsers. Also, un-checking the box displays my mega menu in a disoriented style.. I'm not sure if this is a CSS-related problem..

Its probably a css problem insofar as different browsers make different assumptions about small ambiguities in the css. So you need to over-specify the css to cover all possibilities.

Another thought. Maybe there is a script error part way rendering it in safari, so leaving the css in an intermediate or part complete state.

I've checked the elements and narrowed it down to the mega menu font style. It works when I specify Native Font but it does not work for the other styles - "CSS Font, Google Web Font". Is there any way else I can bypass this?

Maybe specifying a native font as an alternative in the font family would give safari something to fall back on.