I’m currently working on a WordPress site and experiencing some issues with the mobile hamburger menu. The dropdown sections feature arrow buttons that help expand the submenus, but I would like to enable users to click anywhere on the parent menu item text to open the dropdown, rather than just the small arrow.
At the moment, when a user taps on the main menu text instead of the arrow, the entire menu simply closes. This creates a frustrating experience for mobile users since the arrow is quite tiny and difficult to press accurately.
Is there a way to apply custom CSS to make the full width of each parent menu item trigger the dropdown when tapped on mobile devices? I want this feature to enhance the usability of the menu for visitors.
had this exact same issue on my clients site last month. quick fix is adding pointer-events: none to your .expand-toggle in css, then target the whole .nav-link for click events. basically makes the arrow non-clickable and forces everything thru the parent link. works great on mobile!
I ran into this exact usability issue when developing a restaurant website earlier this year. The problem is your current structure has competing click handlers between the anchor and button elements. Instead of modifying JavaScript extensively, you can solve this with a CSS-focused approach by making the entire parent container clickable. Remove the href attribute from your parent .nav-link anchors and add cursor: pointer to maintain the visual feedback. Then use CSS to expand the clickable area by adding display: block; width: 100%; padding: 15px 0; to your .nav-link class. This creates a larger touch target that feels more natural on mobile devices. You will still need minimal JavaScript to handle the toggle functionality, but this approach reduces the complexity while improving the user experience significantly. I found this method works consistently across different WordPress themes without conflicting with existing menu scripts.
Looking at your HTML structure, the issue stems from having both the anchor tag and the dropdown button handling clicks separately. I encountered a similar problem last year when building a custom theme. The cleanest solution involves modifying your JavaScript event handlers rather than relying purely on CSS. You need to prevent the default anchor behavior and attach the dropdown toggle function to the entire .nav-link element instead of just the .dropdown-btn. Add this JavaScript to your theme: document.querySelectorAll(‘.has-dropdown .nav-link’).forEach(function(link) { link.addEventListener(‘click’, function(e) { e.preventDefault(); const dropdown = this.nextElementSibling.nextElementSibling; const isVisible = dropdown.style.display !== ‘none’; dropdown.style.display = isVisible ? ‘none’ : ‘block’; }); }); This approach maintains accessibility while expanding the clickable area to cover the entire parent menu text. Make sure to test thoroughly across different mobile devices since touch targets can behave differently depending on the browser.