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
Attachment | Size |
---|---|
Safari - Local - Working.jpg | 196.68 KB |
Safari - Live - Not-Working.jpg | 192.99 KB |
Comments
Your issue is the overflow:
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
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
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
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.