Works fine in Chrome & Firefox ( both PC and Mac ).
basically it's a slidetoggle and that works, but based one the display:block of the elements it is basically transparent in the browsers cited above [meaning you can click and it will take you to it's linked tag].
The site has one breaking point at > 1230px, then it basically gets responsively smaller until you hit < 700px where the navigation will change.
Please help if you can and have experience working with browser sited above
Look at the code here: http://www.testing.sixstarproductions.com
Ok I got it. I have a fixed header with a fixed nav inside it, what I need to do was make overflow:visible on the header element.
It worked on Chrome and Firefox beforehand but not Safari or mobile browsers, so in case anyone came to this issue now you have an answer.
Thanks for looking
Related
I hope you can help me to solve this problem, I'm using a responsive menu plugin (eDs responsive menu, it uses sidr) on a WordPress site, I tested it on android with default browser, chrome & cm browser.
In chrome displays correctly, but in default browser & cm browser when I open the responsive menu, It's in blank, the same happens with safari on iOS.
I think that it's maybe because some incompatibility with some CSS tags with those browsers but not sure which ones, Can you give me ideas so I can try to find out what is going on.
Here are some image samples:
Blank menu in default android browser
Menu displaying correctly in chrome
Maybe this answer doesn't apply por everyone and is not complete, but the problem is the css tag: position: fixed combined with some transitions, it's android default browser and safari problem. I haven't found a fix for this yet.
I am currently developing a site using drupal.
It's a responsive website, and my problem occurs only on the Android Firefox browser.
When in mobile view (mobile browser, or tiny browser screen on desktop), scrolling down will change the header colours and images, and clicking the menu button will make the menu appear.
My main problem is that the jquery that does all this, will not work in my android firefox browser, but works fine in any other browser. I've put it all in a fiddle.
https://jsfiddle.net/gbwts8a9/7/
The problem appears to be in the
if ($('.l-header').css('position') == 'fixed' )
statement. If I change that to
if(true)
Firefox also does exactly what it's supposed to do. However, no matter what I change it to ( I've tried to check for #l-navbutton.is(:visible) , I've tried $(window).width functions, but no matter what I do, firefox android apparently does not evaluate them as true, even when all other browsers do.
What statement would check for being on a small screen, and works in all mobile browsers?
To make my situation work on all browsers I had to combine my original statement, and the statement as suggested by adelphus (thanks!) as neither seems to work on all browsers by itself.
My final statement is
if (window.screen.width < 800 || $('.l-header').css('position') == 'fixed' )
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!
It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.