Archived

This topic is now archived and is closed to further replies.

  • 0

Dropdown buttons not clickable on iPhone or iPad?

Question

Posted · Report post

Reposting after original was moved to a non-supported product forum.

 

 

I just added dropdown buttons to my site only to discover that they're not clickable on an iPhone or iPad. Am I doing something wrong? Site link: http://www.approachguides.com/guides/france/wines-of-france-loire/

 

 

Please note, I am not referring to the mobile menu (that works fine), but rather the light blue dropdown button (reads: Buy online $3.99) Here's a screenshot: http://cl.ly/image/1F3b3b3m340I

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi Danny,

No problem and thanks again for your response :)

I added the same button to the ContentBox and seem to be having the same issue (scroll all the way to the bottom to find another blue drop-down button). Any further suggestions?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

It is a guess, but there may be a z-index issue with the drop down in iOS.  The fact that it works in other browsers says that the drop down itself is fine. But conversely, the fact that it fails in iOS means it's browser specific.

 

Oddly enough, we have a little plugin called Browser Specific CSS found in the Top Free section of Dashboard > PageLines > Store > Plugins, and it's free.

 

I'm hardly an expert in z-index, but there's plenty of resources online to guide you in the proper setting. Applying the correct CSS z-index to the drop down should be doable. This may be your solution.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, but I don't totally understand. The buttons work on iOS on your site: http://demo.pagelines.me/tools/

 

But not on mine. I am using the suggested code (see below) and have tried the button in two areas of the site: 1) in a banner at the top of the page and 2) in the content box at the bottom of the page. 
 
Any suggestions?
[pl_splitbuttondropdown size="large"
type="success" label="button"]
<ul>
    <li><a href="#">This</a></li>
    <li><a href="#">This</a></li>
    <li><a href="#">This</a></li>
</ul>
[/pl_splitbuttondropdown]
 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

This in my opinion your issue is caused by the way you're using the Banners section, it was mean't to be used in this way. Its intended to house text on one side and an image on the other. You're using it for basically a three way column of image, text and image again.

 

I recommend trying the same thing but with the ContentBox but use the PageLines Grid and this should work.

 

If it still doesn't work, then it has to be related to either custom code you have added or a plugin. Therefore, I recommend you disable all active non-PageLines plugins and see if the buttons are working, if not then remove your custom code and then check again.

 

Also, it may be related to your iPad, what ipad version and OS are you using ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I apologise I moved your topic assuming you're referring to the drop down menu in your navigation. ;)

 

I have just created a banner, added some random text, an image and then added the button drop down shortcode, with 3 links to google, youtube and twitter. I then viewed my site on my ipad and iphone pressed the button to display the links and when clicked, the button links worked.

 

Therefore, you may have an issue with the way you're using the Banner section and the HTML you have used, it wasn't really designed to house one image, some text and then image link on the other side. I would suggest you use the ContentBox and PageLines grid to achieve your layout.

Share this post


Link to post
Share on other sites