Mobile Menu
Support Area › Forums › Elite › Mobile Menu
- This topic has 7 replies, 2 voices, and was last updated 8 years, 2 months ago by Bill Robbins.
-
AuthorPosts
-
February 18, 2016 at 15:29 #35554Josh GoldParticipant
I notice the submenus don’t work on mobile (just the main menu choices). Is there any way to get the subitems to load on mobile, and if not, is there a way to build separate menu items for the mobile menu?
February 18, 2016 at 15:37 #35556Bill RobbinsModeratorHi Josh,
Great question. In the mobile menu you’ll see an arrow next to items that have sub-items below them. Tapping on that arrow will open up the sub-items. It is quite small though and unfortunately easy to miss.
There are a few plugins you might look at to replace the mobile menu:
ShiftNav – https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/
WP Responsive Menu – https://wordpress.org/plugins/shiftnav-responsive-mobile-menu/
WP Mobile Menu – https://wordpress.org/plugins/mobile-menu/I have not personally tried any of those three, but they’re all used on quite a few sites and have pretty good ratings which is usually a good indication. If you do go with one of them and you have trouble, let me know.
Thanks,
BillFebruary 18, 2016 at 19:01 #35573Josh GoldParticipantThanks Bill. The plugins work but they sit on top of the existing nav. They have a way to disable the primary nav in their settings I think.
****
Enter the selector of the theme’s menu if you wish to hide it below the breakpoint above. For example, #primary-nav or .topnav.*****
What syntax do I use for the Elite theme’s top menu?
February 18, 2016 at 20:19 #35577Bill RobbinsModeratorSee if this will take care of that:
#top-menu
Let me know if that won’t do the trick,
BilFebruary 18, 2016 at 20:56 #35578Josh GoldParticipantThanks for the fast response Bill!
It does not work quite yet. Here is the specific info from their FAQ
Hiding the theme’s menu
To hide the theme’s menu, you’ll need to find the appropriate class or ID to hide. The easiest way to do this is to use the Chrome Developer Tools – right click on the theme’s menu and click “Inspect Element”. Look up the DOM tree for the nav or div that is wrapping your menu’s topmost ul, and use the ID or class from that element to hide the menu.
If you need to hide multiple menus, you can comma-separate their selectors. For example, .top-menu, #main-menu. This works just like a normal CSS selector, and that is how this setting will be used by the plugin to hide the targeted elements.
******
Please let me know if you have any further thoughts or ideas.
February 18, 2016 at 21:05 #35579Bill RobbinsModeratorWould you mind sending over the url to your site? That would really help. Thanks.
February 18, 2016 at 22:03 #35580Bill RobbinsModeratorThanks for sending over the link. It’s always enormously helpful to see the site and interact with it’s code.
In this case we don’t need to hide the main menu, but the existing mobile one. Add this to the Custom CSS box in the Advanced tab of the theme options page:
@media only screen and (max-width: 767px) { .slicknav_menu { display: none; } }
Save your changes and that should hide the mobile menu too. Let me know if that doesn’t do the trick this time.
Take care,
BillFebruary 19, 2016 at 09:18 #35583Bill RobbinsModeratorGood Morning Josh,
You can hide the logo too on smaller screens. Change the snippet above to be like this:
@media only screen and (max-width: 767px) { .slicknav_menu { display: none; } #logo { display: none; } }
and that should do it.
Have a great weekend,
Bill -
AuthorPosts
- The topic ‘Mobile Menu’ is closed to new replies.