Make Slide-in Menu Top Level Items into Links

Written by Dan Mossop

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.

Elevate Divi's Slide-In Menu with jQuery

Unlock the full potential of your Divi slide-in menu by making parent links clickable using jQuery. With this simple tweak, ensure users can navigate directly to parent pages while maintaining easy access to submenu items, refining your site's navigation experience.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. hi! it's works well for me but when i'm on a parent page (active link) their child page doesnt show, thje toggle kind of leave ! Do you know how to fix it?

    Reply
    • Hey Marjorie, hopefully I'm understanding correctly what you need… I've just put up a post explaining how to make the slide-in menu open the submenu for the current page. If you're on either the parent page OR the child page, it should open the corresponding submenu. I hope that helps, but let me know if it's not what you need. Thanks!

      Reply
    • Hey Nito, I can see that site has a slide-in menu on mobile, and the top level items in it are clickable links (i.e. clicking on "JÓVENES LECTORES" and "INFANTIL" takes you to the corresponding pages). The instructions in this post should allow you achieve the same linking effect using the Divi slide-in menu. If that's not working for you, are you able to send a link to the site you're working on so that I can take a look? Or if you want to copy some other aspect of the Mr Books site, please let me know which one(s) and I'll try to help out. Cheers!

      Reply
  2. Dan, isn't working in my phone is still "down arrow"

    Reply
    • Hey Spah, if you haven't already, try clearing your phone's browser cache. Note that the code should make it so that text of top level items can be a clickable link, rather than just opening the submenu. In this case, the down arrow will still be visible and can be used to open the submenu. I just tried this out on my test site and it's still working for me with the latest version of Divi. If the cache clearing doesn't work, are you able to send me a link to the site you're working on so that I can take a look for you? Thanks!

      Reply
  3. I kinda love ya for this… Thanks

    Reply
    • Ha ha! You’re welcome, Brian :)

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest Posts

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

Disable Slide-In Animation for Divi Gallery Grid Images

Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...

Control Image Count Display in Divi Gallery Lightbox

Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...

Hide Gallery Image Titles in the Divi Lightbox Overlay

Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...

Random Posts