Mobile Menu

[Josh Gold]

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?

[Bill Robbins]

Hi 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,
Bill

[Josh Gold]

Thanks 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?

[Bill Robbins]

See if this will take care of that:

#top-menu

Let me know if that won’t do the trick,
Bil

[Josh Gold]

Thanks 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.

[Bill Robbins]

Would you mind sending over the url to your site? That would really help. Thanks.

[Bill Robbins]

Thanks 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,
Bill

[Bill Robbins]

Good 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

[Author]

Posts