Make Slide-in Menu Top Level Items into Links

This post may contain referral links which may earn a commission for this site

The Divi theme's Slide-In Menu displays menu links in a vertical bar which is revealed when you click the menu button. When opened, it displays a list of top level (parent) menu items. Normally, clicking on one of these menu items takes you to the linked page. However, If a top menu item has submenu items (children) then clicking on the parent link will instead expand the list of children items. This means clicking on the parent no longer takes you to the linked page. Here's how to fix that.

Making Slide-In Parent Links Clickable with jQuery

The following jQuery code changes the behavior of the Divi slide-in menu such that only the "down arrow" toggle button will open the list of child links. Clicking on the text (or background area) of a parent link, whether it has children or not, will take you to the linked page.

<script>
jQuery(function($){
	setTimeout(
		function(){
			$('#mobile_menu_slide a').click(
				function(e) { 
					if (e.target.nodeName === 'A') {
						e.stopImmediatePropagation(); 
					}
				}
			);
		}, 
		100
	);
});
</script>

You can paste this, for example, into the "Divi > Theme Options > Integration > Add Code to the Head of your Blog" box.

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *