For the mobile navigation on my website I have noticed if I expand the parent menu of one section with 12 child menu items then mobile navigation extends below the bottom of my phone screen and the menu doesn’t scroll so not all child menu items are visible. Viewed on my iPhone6 in portrait the last 3 child menu items don’t display and in landscape the last 6 don’t display. It is certainly possible that I’ve set it up in a way to not display completely/properly. Is there a way to configure the mobile menu to scroll or another way to access all of the child menu items?
You can see what I mean on the live site even on a desktop if you size the browser window in both directions to simulate a mobile phone screen size.
The section of the navigation menu with 12 child menu items is Travel
Thanks,
Gary
Hey there @GaryW17 –
Your navigation is setup as a sticky navigation. This means it is affixed to the top of the browser, or in the case of the iPhone it is locked to the top of the device’s screen. This means that since it is locked in place it isn’t going anywhere when you scroll, and thus those last few items in your long list of navigation items are going to be out of view.
Some solutions would be to turn off the sticky navigation feature you’ve enabled for the Navigation Bar stack or to setup your navigation items in a different way as to not have so many in one drop down.
Thanks, Adam
I will play around with it when I get home this evening and see what I can do. I like the sticky navigation for the desktop view, so I guess I want the best of both worlds - sticky for desktop and not for mobile. Would there be a problem in having two instances of the navigation and displaying only the sticky for desktop and the non-sticky for mobile?
I don’t foresee any problems doing that. It isn’t something that I’ve personally tested, but it should work fine.
Have been playing around with some options - and so far I think I like the idea of switching to the Slide Navigation at the mobile breakpoint. And it seems to work fine from what I’ve tested so far. This way I get to keep the long list of child menu items as well as the Sticky Nav Bar for desktop viewing and the Slide Nav toggle stays visible on mobile devices - which is good, too.
http://www.whiteonline.ca/development/foundry/
Will play some more before I decide, but it is a solution. Thanks again for identifying the issue I had with the navigation, Adam.
Gary
Cool. Glad you’re finding a way to accomplish what you are after. There’s lots of ways of doing things in web design. Many times finding what is right for a specific project takes time, but it always feels rewarding to finally land on the thing we both like and works for our project.