Mobile Menu

Support Area Forums Elite Mobile Menu

This topic contains 7 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://
  • Author
    Posts
  • #35554

    Josh Gold
    Participant

    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?

    #35556

    Bill Robbins
    Moderator

    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

    #35573

    Josh Gold
    Participant

    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?

    #35577

    Bill Robbins
    Moderator

    See if this will take care of that:

    
    #top-menu
    

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

    #35578

    Josh Gold
    Participant

    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.

    #35579

    Bill Robbins
    Moderator

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

    #35580

    Bill Robbins
    Moderator

    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

    #35583

    Bill Robbins
    Moderator

    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

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Mobile Menu’ is closed to new replies.