Hi,
I noticed that if I use the “load page” option for a menu item, nothing happens when i hover/click on that item in mobile mode. This is rather bad for the user experience.
I was wondering if there was a way to make it so if when accessed from desktop, the page will pop up (as it does now), but if accessed from mobile, the user is taken to that page when he clicks on the menu item…
let me know how that sounds and if there are any other turn arounds to do something like this
Hello,
Unfortunately the mega-menu option is not available on the mobile version of the theme. What you can do to achieve your desired effect is create 2 menu items with the same name and make one a mega menu and the other one a custom link. Then you can simply hide the custom link on the desktop version and hide the mega menu item on the mobile one. http://screencast.com/t/MRAfgkxu
Then you can use css to hide each one on the device of your choice.
Every menu item has a custom class called menu-item-x where x is the menu item number.
You can target these with css like so:
first one:
@media (max-width: 767px){
.menu-item-362{
display:none!important;
}
}
This is for the mobile version to hide the page menu item.
http://screencast.com/t/yoIuZn5gmS
And for the other we use the code like so:
@media (min-width: 767px){
.menu-item-363{
display:none!important;
}
}
http://screencast.com/t/thg1VSizG
Use both of these codes together in the theme panel->custom css box. You will have to adapt the code to your menu item numbers. Use the browser inspector to do this: http://screencast.com/t/JMg4UDwGJz
I hope this helps.
Thank you!
Thank you, this works for me 100% woohoo
