Streaming live at 10am (PST)

Dropdown/nav links on tablet and phone


#1

Hello,

I am having issues with dropdown/nav links on tablet and phone (especially phone landscape format).
When I click links on the desktop browser when the browser is sized to tablet and phone format, the links work normally.
However, when I tap the links directly from the devices (tablet and phone), the links don't always work. It seems to be a bug. On the phone in Landscape format it doesn't even seem to work anytime.

Here is the read-only url: https://preview.webflow.com/preview/testingmav8?preview=83eb42dac43abae3ac05fe75a41b87a6

Thanks!
Chaz


#2

Hi @Chazm, thanks for the post smile Could you let us know, which mobile tablet and phone device you are using, so I can test on the same device?

Cheers,
Dave


#3

Sure @cyberdave,

The devices I have tested on are:

iPad mini 2 – iOS 8.1.2
iPhone 4S – iOS 8.3

Best,
Chaz


#4

Hi @Chazm, thanks, could you also let me know which link is giving you a problem? I was checking out some links, but the url was set to #.

Thanks in advance and I'll be standing by for your response! smile Cheers, Dave


#5

Hi @cyberdave,

For example:
http://testingmav8.webflow.io/breadth/projects/human-rights/breadth-content#global-section
So on tablet and phone horizontal, if you tap Global from the pancake under Breadth > Projects > Human Rights > Global

Same with http://testingmav8.webflow.io/breadth/projects/human-rights/breadth-content#un-rights-section
Tapping UN Rights

or http://testingmav8.webflow.io/breadth/projects/human-rights/breadth-content#remember-section
Tapping Remember

Now the latest is that when I tap Global, I get sent to News Landing Page (http://testingmav8.webflow.io/news/news-landing), if I tap UN Rights, I get sent to Purchase Landing Page (http://testingmav8.webflow.io/purchase/purchase-landing) etc, so in other words there is something to do with the vertical positioning and or the z-index, where the vertical height of a pancake/dropdown element seems to affect what page I get taken to.

Thanks,
Chaz


#6

Hi @Chazm, thanks for the update. I will take a look. This is one of the reasons, that we do not recommend using nested dropdowns for mobile menus, because they really were not designed to be used nested. You can do it, but strange things happen sometimes.

I am going to take a look though, and see what might be causing that.

As soon as I have an update, I will post back smile Cheers, Dave


#7

Thank you @cyberdave for taking a look.
I understand. Unfortunately the nature of my work forces me to group, hence the nesting.
Can you suggest another way in your coding experience to tackle this situation without resorting to nesting dropdowns without me losing the site structure and look and feel?
I am attaching a screenshot of the open pancake nav.
Thanks again,
Chaz


#8

Hi @Chazm, well first I will take a look and see what it is that is causing the links to not work correctly. It is likely something along the lines of what you said, about the z-index or some other rogue style.

You can use nested drop-downs, I am just saying, from a user experience perspective, it is not the most ideal layout for mobile devices.

Once I have further info, I will update you smile Cheers, Dave


#9

Thank you @cyberdave.
Best,
Chaz


#10

Hello @cyberdave,

I just noticed a bug with the Submit button at the end of my contact form under the Contact link.

I have a border style of 1px all-around border #cc7c31 for the Submit Button and it is not showing neither in webflow nor on the live/preview site. It use to be fine before.

Here is the link: http://testingmav10.webflow.io/contact/contact-landing

Thanks,
Chaz


#11

Had this problem myself yesterday. What I did was to remove the border and then add it again. Tell me if it won't help!


#12

Thanks @StevenP,

I tried removing the border and adding one again, still no result. I also tried creating a new button style with border altogether, same problem. The strange part is that when I try giving borders to other elements, it all seems to work fine. The problem is only to do with the Submit button on the form.
When I inspect the element in the browser, border is set to 0 strangely. Attached is what I am talking about.

Thanks again,
Chaz


#13

Hi @Chazm, thanks for the report. There may be an issue with the border on the submit button.

Could you share the site read-only link: https://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link?

You can also send us an email to support@webflow.com with your report smile

Cheers,
Dave


#14

Hello @cyberdave,

here is the read-only link:
https://preview.webflow.com/preview/testingmav10?preview=fc158b21fd8913805aaa2586dd3fbf70

Thanks,
Chaz


#15

Hi @cyberdave, @StevenP,
Any updates on the Submit Button bug there?
Thanks,
Chaz


#16

Hi @Chazm, thanks for the followup. This bug was fixed. Can you try to set the border on the submit button and let me know if you still see an issue with that?

Regards,
Dave


#17

Hi @cyberdave,
It still looks the same. I can't see the outline on the button. Only the hover state appears to work.
Thanks,
Chaz


#18

@cyberdave,
It did just work now when I republished. So, we are all set.
Thanks,
Chaz


#19