Hi,
Please take a look at the “State” menu in my site(http://www.newsmug.in/).There are more than 20 sub menu items and its very difficult for the user to select the last menu option.In order to provide a better user experience I want all the menus to displayed in a horizontal section.Please take a look at the screenshot provided for better understanding of how I want the menu to be displayed.It would be great if you could help me with it
http://www.screencast.com/t/qg2Nw9BI
Thanks,
Anand
Hi,
A solution for your issue is to create a page use WP Custom Menu element and create your menu, then paste your page id an make it mega menu. The result will be like you can see in Newsmag demo(Travel item) – http://screencast.com/t/vPNZFiKUP – http://demo.tagdiv.com/newsmag/
As reference how create a page like that:
https://forum.tagdiv.com/topic/write-review-from/#post-37849
Thanks!
Hi Alin,
Thank you.Please take a look at the “International” menu in my website(http://www.newsmug.in/) This worked perfectly in PC.However in Mobile I cant see the sub menu items at all.Please guide me how to make this work in mobile as well. In mobile if the sub menu items are displayed that’s just fine(For eg : Please take a look at my “state” menu in mobile.I want the sub menu items to be displayed like that)
Thanks,
Anand
Hi,
Unfortunately the megamenu was not designed for mobile menu, so it will not display the page content there.
You could try to sort your submenu items in few categories – http://screencast.com/t/cJoRhJZNKil – http://screencast.com/t/d3mYTHqv4
Or you can use the unique class of the menu item to create something similar where you need – http://screencast.com/t/NG6Z87oNQkjz
@media (min-width: 768px){
.menu-item-690 ul {
overflow: overlay;
height: 500px;
}
}
Thanks!
Hi Alin,
Is there any way where I can load different Sub menu in PC and Mobile??.So that this problem can be solved
Thanks,
Anand
Hi,
You cannot load another submenu for mobile devices. A solution is to add the submenu as usually for the menu item that it is megamenu and hide it only for tablets and desktop. So for mobile it will look the same – http://screencast.com/t/a6XrmiMi
The result in this point is – http://screencast.com/t/x1QZJm2Ahb so you can use media queries to hide the subitems on for tablets and desktop – http://screencast.com/t/BfK7I47VU
Result on mobile – http://screencast.com/t/wYEpuZKBNcTj
@media(min-width: 768px) {
.menu-item-3994 .sub-menu > .td-normal-menu {
display: none;
}
}
Thanks!
Wow..This is great.You guys are awesome.I didn’t know how to fix the issue.Thanks for helping me with this
Thanks,
Anand
