Sustainable Drop Down Mobile Menu (with a Link on Parent Item)
Latest update: May 24, 2018 | Reading time: 2 to 3 minutesWhen we designed Healthlex we had in mind most users will adopt the popular trend of abandoning the multi click menu and simply hover to let the menu roll. We couldn’t ignore the possibility of someone seeking for a single line menu without sub-items so we had to let the user decide for the menu structure. There are two cases:
- A simple menu. Just select and go. No problem with the mobile menu.
- A menu with sub-items. What happens with the mobile menu?
In a mobile menu with sub-items, a configuration with a link on the parent item will not let the sub-menus unfold-and-stay onscreen. Instead, the click will trigger the link on the parent item. This is due the design concept. We have been thinking a lot to have a different approach but reading some articles like this persuade as it was the best thing to do. The best way to let the menu unfold-and-stay is to remove the link on the parent item. A custom link with a hash “#” will do the trick. And it makes more sense for the end user.
We know some people would like to revert into the old-fashioned functionality, having a link on parent item and expect the menu to unfold-and-stay. So, we prepared a patch for anyone who need to have two clicks on the mobile menu; one for the sub-menu to unfold and a second for selecting an item, including the parent item. You will need access to your installation via FTP to apply the patch.
Download this file and extract it locally. There is a single javascript file inside. Next, connect to your account with your favorite FTP client, go to /healthflex/wp-content/themes/healthflex/assets/js and replace theme.js
Remember, if you need the customization to remain after a theme update, you’ll have to apply the patch on the child theme. In that case you’ll need to create assets/js/ in the child folder and place the file in there.
That’s it! Next time you visit your website on a mobile device, the menu will function in the alternative way – although we’d prefer you simply removed that link 🙂
VALID FOR ALL VERSIONS OF HEALTHFLEX WP