Trigger Submenus on Touch-enabled Devices

Uncategorized

Headers with submenus could be a problem on displays with touchscreens, specially if the submenu parent has a link to a page or to an external source. This guide will help you in making submenus touchscreen-friendly.

In your custom CSS file, add @media (pointer: coarse) property. This media query targets all devices with touchscreen displays.

The code below enables the user to tap the submenu parent and show the submenus without being redirected to the page/external link.

/* for devices with touchscreens */
@media (pointer: coarse) {
	/* for submenus */
    header ul.wp-block-navigation__container > li.has-child > a{
        pointer-events: none;
    }
}

am gon miss u guys

Leave a Reply

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