Как добавить поддержку сенсорных нажатий для работы меню WordPress

можно попытаться сделать это через псевдокласс :active или :focus

и @media

Хотелось бы просто подключить какой-то js легкий к сайту.

Ну так не получится, надо кастомайзить

смотрите как я это решил сейчас.

Дописал js который по клику на блок добавляет ему класс.

		$('#udslider').click(function(){
			if ( $('#udslider').hasClass('active')){$('#udslider').removeClass('active');} else {$('#udslider').addClass('active');}
		})

а дальше в css уже прописал условия для каждого из разрешений.

например до 192 точек, это стандартные десктопы

от 192 это ретины и мобильники.

я не стал заморачиваться и просто прописал привязку к задающему

/* для десктопа */
@media screen and (min-resolution: 60dpi) and (max-resolution: 191dpi)   {
	html { font-size: 62.5%; }
	#udslider:hover{height:30rem;}	
	#udslider{cursor:pointer;}
}

/* для мобилки */
@media screen and (min-resolution: 192dpi) {
	html { font-size: 180%; }
	#udslider{background-color:RGBA(150,0,0,0.9)!important;	height:2rem;}
	#udslider.active{height:30rem;}
}

живой пример тут http://u1.dep2.ru/man/pt.html

Может быть есть способ получше и проще?

Kepus, Оставить как есть, просто клик и ховер в мобильном браузере одно и тоже. Чтоб убрать ховер в мобильном хроме, например, надо кликнуть куда-нить в другом месте страницы

          <div id="mobile-menu">

            <nav>

              <?php

              $args = array(

              'theme_location'  => 'mobile',

              'menu'            => '',

              'container'       => 'div',

              'container_class' => 'mobile-menu',

              'container_id'    => '',

              'menu_class'      => '',

              'menu_id'         => '',

              'echo'            => true,

              'fallback_cb'     => 'wp_page_menu',

              'before'          => '',

              'after'           => '',

              'link_before'     => '',

              'link_after'      => '',

            'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',

            'depth'           => 0

            );

            wp_nav_menu( $args );

            ?>

          </nav>

        </div>

два меню выводите, один к примеру для экранов с шириной до 989

а этот код для менее...

К сожалению способ с определёнными условиями для экранов меньше определённой ширины не походит. Даже у iPad разрешение по ширине больше, а следовательно не будет правильно работать. Неужели нет просто какого то JS, который бы сделал все?