Mobile Navigation - Working on Local site but not on live (both in Safari)?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
spessex's picture

If anyone can help with the following it would be greatly appreciated as I'm quickly becoming grey haired over it.

Basically I have a site that's navigation works perfectly on all local versions but has issues when testing the live site on the most of the same browsers (please note all files are identical in terms of those on local and live server).

The site has been designed to be mobile friendly so when you reduce the browser window the navigation scales to it's mobile version. The normal fully expanded version of the navigation works on all the browsers (with the exception of mobile due to sizing) both local and live but when it comes to the reduced mobile navigation it's blank on most of the live versions.

The mobile navigation version results are as follows:

Safari (Local) - OKAY
Safari (Live) - NOT WORKING (INVISIBLE)
Firefox (Local) - OKAY
Firefox (Live) - OKAY
Chrome (Local) - OKAY
Chrome (Live) - NOT WORKING (INVISIBLE)
Mobile (Samsung Browser - NOT WORKING (INVISIBLE)
Mobile (Chrome) - NOT WORKING (INVISIBLE)
Mobile (Opera) - OKAY

The site is www.theessexs.com

user: stephen.essex
password: access.1151

Can anyone advise why this might be happening? I've been stuck on this for 2 whole days now and getting no-where fast.

For a demonstration I have attached two screen shots of the Safari version one for local and one for live, both show exactly the same code and styes etc.

Thank you

Stephen

AttachmentSize
Safari - Local - Working.jpg196.68 KB
Safari - Live - Not-Working.jpg192.99 KB

Comments

Your issue is the overflow:

flapsjack's picture

Your issue is the overflow: hidden property that is defined on the <nav class="top-bar"> container. That property is causing the menu, which overflows, to be hidden. You'll need to determine from the working dev version what is different with these properties, but as soon as you remove that property, the menu appears as expected.

Thanks for taking the time to

spessex's picture

Thanks for taking the time to look at this.

I'll take a look at this but what's perplexing me is that the dev (local) and live version are exactly the same (they have exactly the same css files). I've even uploaded them three times again just to check I haven't missed anything obvious. What's particularly baffling is why it works on local Safari but not live, yet works on local Firefox and live Firefox.

I would have to look at the

flapsjack's picture

I would have to look at the "working" version somewhere to further help you. But I would definitely look at that overflow property to see if it's behaving the same way in your dev environment as it does in live.

I thought I'd update you. I

spessex's picture

I thought I'd update you. I thought I'd give it a few more shots over the weekend to ensure I didn't waste your time and started totally from a fresh install and then imported the site/database across and now for some miraculous reason it now appears to be working.... for now ;) Annoying that I don't know how I've fixed it but at least it's working.

Thanks again for your time with this.

Theme development

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: