Navigation not clickable on Mobile
Closed this issue · 4 comments
Problem/Motivation
Navigation on mobile cannot be reached when the subnavigation has too many items.
Describe the bug
I came across this on a development site, I tried to scroll down to the last item in the Mobile navigation and had a hard time getting navigation to show on the page once its does show it cannot be clicked.
To Reproduce
video example: https://app.screencast.com/pDTc8mB1X2JSD
- On an actual mobile device ( i used iphone 13pro /safari ) goto: https://dev-marcom-redesign.pantheonsite.io/brand-guidelines/videography/filming-campus
- Click on 'menu' icon in upper right hand corner
- Click on 'Our Team' at the bottom of the list
- try to scroll down to "Cross-Campus Leadership" if you are able to see it try to click on it - https://app.screencast.com/CdwrxSqvunHU7
Proposed resolution
Description of the proposed solution, the rationale behind it, and workarounds for people who cannot use the patch.
Expected behavior
Easy to navigate to last items. see Arizona.edu for expected behavior
Screenshots
video example: https://app.screencast.com/pDTc8mB1X2JSD
Smartphone (please complete the following information):
- Device: [iPhone 13 pro]
- OS: [iOS 16.6]
- Browser [chrome and safari]
- Version [chrome 115 / Safari 17]
Additional context
Add any other context about the problem here.
Thanks for the screencasts! I don't have an account on that site, but it looks like some of those menu items may not have links associated with them:
Recommendation: Add padding to bottom of off canvas nav
<ul class="navbar-nav flex-lg-row pb-5">
It looks like this might be specific to iOS devices and not browser specific. I tested on a Pixel 7 Pro with Chrome and was able to expand all of the dropdowns and still click on "Cross-Campus Leadership". You do still get a little bit of background scroll once you reach the bottom of the menu, but the menu item is reachable and intractable on this device. You just have to scroll the actual page enough for the browser toolbar to scroll up out of sight (standard scrolling behavior for this device).
After scrolling past the toolbar:
Before scrolling past the toolbar:
