Community Forums › Forums › Archived Forums › Design Tips and Tricks › Drop-down navigation is very long and disappears off-screen
Tagged: drop down navigation, main navigation, navigation disapears off-screen, navigation disappears
- This topic has 5 replies, 3 voices, and was last updated 7 years, 9 months ago by philliekay.
-
AuthorPosts
-
May 23, 2016 at 6:08 pm #186158philliekayMember
Hi!
I am using Eleven40 Pro Theme and have been struggling on how to make this navigation work. The navigation drop-down menu on the top is very long and disappears off-screen and not visible on my laptop browser.
This is the dev site: http://dev.mandacap.com. Hover over "Product Experience > Mergers & Acquisitions." There are about 35 drop-downs for "Mergers & Acquisitions" and they disappear off-screen. Any help / advice would be greatly appreciated on how to make this work or if there is a better option for this navigation drop-down.
Thank you in advance 🙂
http://dev.mandacap.comMay 24, 2016 at 10:14 pm #186233ChristophMemberHi,
truth be told, nobody is going to look at such a long navigation menu.
Can you group elements under common themes/topics? (industry, size, ...)Here is a possible solution if the menu has to stay the way it is
https://css-tricks.com/long-dropdowns-solution/
May 26, 2016 at 1:29 pm #186333philliekayMemberThank you Christoph for your reply! The client is VERY adamant about that freakishly long sub-nav. I tried my best to tweak the CSS to minimize the padding and spacing as much as I could but a few of the menu items still fall below the fold (and I'm sure users with monitors smaller than my 17" laptop will have even more problems accessing the hidden nav items.
I really like your suggestion of having an auto-scroll nav. I will try that technique 🙂
May 27, 2016 at 7:05 pm #186399hipstershaunMemberI've never use any of these types of menu plugins I'm about to suggest, but it may be your best solution for this stubborn client. This is one of several and I have no idea if one is better than the others or how the exact options may differ.
https://www.maxmegamenu.com/You could use the feature where it places several smaller menus next to each other to give the effect of the menu simply wrapping to the next column. Or perhaps it has that as an option. Not sure as I haven't actually tried it.
June 3, 2016 at 1:30 pm #186900philliekayMemberThank you for your time and response hipstershaun. I will take a look at your suggestion.
June 7, 2016 at 5:09 pm #187125philliekayMemberThank you for your time and response hipstershaun. Just jumped back on this project and installed Max Mega Menu plugin.
It looks like the fancy drop-down menu that spans the full nav area option only works for top level menu items, not sub-menus...and "Mergers & Acquisitions" is a sub-menu item 🙁 I was hoping "Mergers & Acquisitions" would span 3 columns so all 35 items would appear. I think I will just have to put the 35 items on the left nav of the page and call it done. Thank you for your help. I will definitely use this drop-down menu plugin for other clients in the future.
http://screencast.com/t/zdaGvHUmjjV2
"Mega Menus can only be created on top level menu items"
http://screencast.com/t/EVs5EoeYao3j -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.