Canvas Support

Hide primary-menu on click.

1 reply·opened Sep 22, 2017
P
pnighSep 22, 2017

I have a mega-menu item that shows only visible-xs.(mobile) This menu item is actually a shop-filter menu. I would like for when the user click on a data-filter, the whole mega-menu collapses. Can you give me some guidance on this.

<nav id="primary-menu" class="style-6 with-arrows">
	<ul>
            <li class="mega-menu visible-xs"><a href="#"><div>Categories</div></a> 
			<div class="mega-menu-content style-2 clearfix">
				<ul id="shop-filter" class="custom-filter nav nav-pills nav-stacked clearfix" style="max-width: 300px;" data-container="#shop">
				    <li class="activeFilter"><a href="#" data-filter="*">Show All</a></li>
					<li><a href="#" data-filter=".Enterprise-Resource-Planning">Accounting/ERP</a></li>

This is the structure of my menu.

S
SemiColonWebSTAFFSep 28, 2017

Hello,

This is Definitely Possible! Consider using the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 

<script>
	jQuery('#primary-menu ul a').on( 'click', function(e){
		jQuery(this).parents('.sub-menu').find('ul,.mega-menu-content').css({ 'display': 'none' });
		e.preventDefault();
	});
</script>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard