Making entire menu item clickable for mobile dropdown navigation

Other Questions Wordpress
1

I’m working on a WordPress site with a hamburger menu that has dropdown sections. Right now users can only click the small arrow icon to open submenus on mobile devices. When they tap anywhere else on the menu item, it just closes the whole menu instead of expanding the submenu.

The problem: The clickable zone for expanding submenus is too small on mobile. Users have to tap exactly on the tiny arrow which is not user friendly.

What I want: Make the whole menu item clickable so users can tap anywhere on the text or arrow to expand the submenu.

Here’s a simplified version of my menu structure:

<nav class="mobile-navigation">
  <ul class="primary-menu">
    <li class="menu-item"><a href="/blog/">Blog</a></li>
    <li class="menu-item has-dropdown">
      <a href="#" class="parent-link">Services
        <span class="expand-arrow" tabindex="0">
          <span class="arrow-icon">
            <svg width="20px" height="12px" viewBox="0 0 20 12">
              <path d="M1,1l9,9l9-9"></path>
            </svg>
          </span>
        </span>
      </a>
      <button class="submenu-trigger">
        <span class="sr-text">Toggle Submenu</span>
      </button>
      <ul class="dropdown-menu" style="display: none;">
        <li><a href="/web-design/">Web Design</a></li>
        <li><a href="/seo-services/">SEO Services</a></li>
        <li><a href="/consulting/">Consulting</a></li>
      </ul>
    </li>
    <li class="menu-item has-dropdown">
      <a href="#" class="parent-link">Resources
        <span class="expand-arrow" tabindex="0">
          <span class="arrow-icon">
            <svg width="20px" height="12px" viewBox="0 0 20 12">
              <path d="M1,1l9,9l9-9"></path>
            </svg>
          </span>
        </span>
      </a>
      <ul class="dropdown-menu" style="display: none;">
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/downloads/">Downloads</a></li>
      </ul>
    </li>
  </ul>
</nav>

Is there a CSS solution to make the entire width of parent menu items trigger the dropdown expansion instead of just the arrow? I want to avoid clicking on the text closing the menu completely.

2

Had this exact issue on a client’s WordPress site last year. You need to stop the default link behavior on parent items and use JavaScript for click events instead of just CSS.

Add preventDefault() to your parent links and put click handlers on the whole .parent-link element, not just the arrow. This worked for me:

document.querySelectorAll('.parent-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const dropdown = this.nextElementSibling;
    dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
  });
});

Also check your CSS doesn’t have conflicting click handlers on the nav container - those might close the menu too early. Look for event listeners on the nav element itself that trigger menu closure. That’s probably why tapping elsewhere closes everything.

3

Add pointer-events: none to .parent-link and pointer-events: auto to the li.has-dropdown element. Bind your toggle JS to the li instead of the link. This prevents the anchor from messing with your dropdown logic and makes the whole menu row clickable. Fixed the same issue on my BuddyPress site.

4

Had the same issue with a Shopify theme mod. The problem’s usually that your parent link and submenu trigger are fighting over click events. You’ve got both a parent-link and a separate submenu-trigger button - that’s likely causing the conflict. Remove the href="#" from your parent links and swap in role="button" instead. Then use CSS pointer-events to make the whole parent container clickable while killing the default anchor behavior. Set pointer-events: none on the link text and pointer-events: auto on the parent container. The trick is getting your JavaScript to target the right element - attach the click listener to the entire li.has-dropdown, not just the link or arrow. This makes the whole menu item one big touch target without anchor tags randomly closing your nav.