Dropdown menus not clickable on ipad/iphone

  • Unknown's avatar
    cynthiakirk · Member ·

    Hello, I’m finding that the dropdown menus I set up under “Services” and “Learn more” aren’t clickable on my ipad or iphone. I posted this in the Theme Support, but they are convinced it is a CSS issue, even though when I delete my custom CSS and try again I get the same problem. Is there some code I need to insert to make the “hover” work on a touch screen? Or could you tell me what I should look for in my code that might be giving me this problem? Thank you!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’m seeing your menu just fine on my iPad (iOS 7 something) and when in portrait orientation (minified menu), I can select the items that are under services (create, facilitate and implement) just fine. If I switch to landscape orientation though, the menus do not work for me, so there is something in the code you have that is causing the issue.

    The Snap Demo site here at WordPress.com works fine for me on my iPad in both portrait and landscape. Try the Snap Demo site at http://snapdemo.wordpress.com/ and see if it works for you.

    You may also want to temporarily remove all your custom CSS and then view your site again on the iPad and clear your browser cache on the iPad and see if the menus work for you then.

    You do have one @media rule that is sort of a duplicate and that could cause problems

    @media screen and (min-width: 900px) and (min-width: 900px) {
#snap-nav ul li:hover {
    background-color: rgba(0, 0, 0, 0);
}
}
#snap-nav {
    clip: rect(0px, 0px, 0px, 0px);
    display: block;
    max-height: 0;
    overflow: hidden;
    position: absolute;
}
@media screen and (min-width: 900px) {
#snap-nav {
    float: right;
    max-height: none;
    overflow: visible;
    position: relative;
}
}

    The things that jump our at me on the above are the clip, the display block and the max-height of 0.

  • Unknown's avatar
    cynthiakirk · Member ·

    Thanks thesacredpath. I actually deleted all of that code (with no change to my design) and I’m still having trouble. I went through and deleted anything I could that didn’t impact the design just to try to clean up the CSS. Is there anything else you can think of for me to try?

  • Unknown's avatar
    thesacredpath · Member ·

    Did you try clearing your cache/web data on your ipad and phone and then taking a try on your site? iPads and iPhones rely heavily on caches to lessen bandwidth usage and make things load faster.

  • The topic ‘Dropdown menus not clickable on ipad/iphone’ is closed to new replies.