-
Posts
-
Hi
I’m struggling with creating my mega menu for my main menu because the sub-menu items a longer than I’ve ever seen…..
e.g. one category contains in one main category, I have 16 sub-categories with their own sub-categories have up to three more sub-categories.Would it be better to use a plugin like UberMenu instead of fighting this uneasy and difficult layout?
Also, would a taxonomy plugin help with managing the order of these massive categories and sub-categories because often when I try to add an item to a menu, it’s not listed or the search can’t find it.
Any suggestions with my two issues would be greatly appreciated.
Thanks
LyseHey tremblayly,
Enfold’s mega menu should work for you if necessary we can help you with custom css. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
VinayHi Vinay,
I don’t have all of the items added to the my main menu yet, but the ones I have done so far don’t display nicely. Until I can get these looking great, then I try to get the longest category done. I did create the 4 main categories as custom categories to use them for my sidebar navigation menu on my home page.
I have included the admin login and website access credentials for you to have a look along with the website link.
Let me know if you need anything else. It would be nice if I can pull this off.
Thanks
LyseAnother page that where you can have a look at this massive list is here: http://silviafindings.wpengine.com/list-of-categories (hosted on WPengine)
Lyse
Hi,
Here you go this code will make the long menus scroll Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #header ul:first-child >li > ul { overflow: auto!important; max-height: calc(100vh - 200px); } /*-----------------------------------------*/ /* Custom scrollbar */ /*-----------------------------------------*/ ::-webkit-scrollbar { width: 6px;} ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } #header .widget:hover::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 56px rgba(0,0,0,0.9)!important; } #header .widget:hover::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 56px rgba(0,0,0,0.85)!important; } #header .widget:hover ::-webkit-scrollbar-track { background-color: rgba(0,0,0,.085)!important; box-shadow: inset 1px 0 50px rgba(0,0,0,.61)!important; }Best regards,
VinayHi again,
If I may ask one more question. How can I make the columns a bit wider because some of my links titles are long many of them taking two lines?
Thanks
LyseHi,
Decrease the font size of the mega menu items:
#top #wrap_all .avia_mega_div ul, #top #wrap_all .av-main-nav ul ul { font-size: 11px; }Best regards,
IsmaelHi
I have made further padding adjustments to my super mega menu, but still I don’t get to see all of my menu items when I hover over the mega menu. The bottom ones do not display.
Also, when I view the mega menu on a smaller screen (17″ or less) one of the mega menu gets chopped on the right – I have attached a screen shot here: https://www.dropbox.com/s/mh920pinghpfo1p/mega%20menu%20chopped.jpg?
I have added the login credentials again just in case you do not have them.
Thanks
LyseHi,
what do you mean with chopped? your mega menu looks as expected to me:
Looks good on mobile for me too. Could you fix it already?
Best regards,
AndyHi Andy,
The chopping did get resolved, however, I still can’t see all of my menu items on the last row. Any idea on how to get these to show?
Thanks
LyseHi,
try this code:
#header .avia_mega_div { overflow: scroll; height: 1500px !important; max-height: 1500px !important; }and adjust as needed.
Best regards,
AndyHi Andy,
I tried the code you provided, however, the “Other Findings” still doe snot show all of the menu items in the last row.
Lyse
Hi,
What is the actual resolution of the monitor where you check this? You can scroll down so that you can see the last row without turning off the mega menu.
Best regards,
IsmaelHi Ismael,
I have a 17″ monitor with resolution of 1980 x 1080. I cannot scroll passed the titles of the second row. Here’s a screenshot of how far I can see: https://www.dropbox.com/s/6hq3pi43ktk1c9d/mega%20menu.jpg?dl=0
Thank you
LyseHi,
I think the only way to fix this is re-organize the categories because there are just too much items in the mega menu. You have to find a way to decrease the items inside. Or create another set of mega menu.
Best regards,
IsmaelHi Ismael,
I have tested splitting the very large category of one of the mega menu. I managed to selectively extract some categories and it does not look too bad now. I need to convince my client to split the category into four. I’ll revert with the results in a couple of days.
Thanks
LyseHi,
alright, let us know if you still need help with this. We’ll keep this thread open for you.
Best regards,
AndyHi Andy,
I have been able to convince my client to split the categories. However, there are mega menus that have remaining display issues.
(1) Example:
Wire – it has a sub-category called Sterling Silver Wires that has its own three sub-categories that have two other sub-categories of their own. How can I can all of sub and sub-sub categories to display opened?(2) Customization & Trading – the mega menu gets chopped on the right. Here’s a link to a screenshot:
https://www.dropbox.com/s/gvgsze12wd0pcb9/customization%20mega%20menu%20issue.jpg?dl=0Thanks
LyseHi,
To make the mega menu scrollable in small screens please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #wrap_all .avia_mega_div, #top #wrap_all .avia_mega_div ul, #top #wrap_all .av-main-nav ul ul { overflow-x: auto; }Best regards,
VinayHi Winay,
That code did not change anything. Perhaps I did not make myself clear on describing the issue. Here’s another screenshot using the wire category:
https://www.dropbox.com/s/17zuscbn05l0eyi/mega%20menu%20wire.jpg?dl=0That category has a sub-category titled Sterling Silver Wires and it has another level of sub-menu items. Within each of that level of sub-categories, there is another level of sub-categories. When I hover over these, the last two sub-menu options no longer display.
Thanks
LyseHi,
I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?
Best regards,
AndyHi Andy,
Here’s the website URL: http://silviafindings.wpengine.com/ (hosted on WPengine)
All works from my end.
Lyse
Hi Andy,
I’m sorry but see a screenshot of the locked credentials in the private area. If I change my credentials I will be forced to change its status which I’m not ready to do yet.
Lyse
Hi,
alright, the way you’ve written credentials was confusing to me. Now it’s working for me.
Try this code inside Quick CSS field:
.avia_mega_div.avia_mega3.nine.units { height: 300px !important; }and adjust as needed.
However it seems to me that there is a conflict with a plugin. Please deactivate all plugins one by one to check which one is causing this issue and let us know if this solves the problem.
In addition to that, please let us know if we are allowed to deactivate one or more of your plugins as well for testing purposes :)If that does not help then there might be some corrupted files, so please delete all theme files completely via FTP, before installing a fresh copy from your themeforest account. Here is a short tutorial on how to install the theme via FTP, in case you are not sure how that works:
Best regards,
AndyHi Andy,
That code helped but did not keep all of the menu levels open.
I will investigate the plugin issue.
Thanks
LyseHi Andy,
All plugins, except for WooCommerce are deactivated and still the display problem exists.
Lyse
- The topic ‘Mega menu with a long list of sub-items’ is closed to new replies.