Меню для мобильной версии шаблона Protostar - Joomla 3.x: Установка, обновление и настройка

Добрый день всем знатокам.
Есть сайт на шаблоне Protostar. В меню присутствуют пункты с выпадающими ссылочными пунктами, причем сам родитель тоже имеет свою ссылку. На десктопной версии работает по наведению и по клику - все красиво. На мобильной версии, естественно, к подпунктам не добраться, т.к срабатывает ссылка родительского элемента. Вопрос: как решить данную проблему? Отдельного меню для мобильной версии в protostare нет. Заменить ссылку на #? Как? Не закрывать выпадающее меню по времени? Как? Спасибо всем, кто откликнется.

Как вариант.
Дублировать в шаблоне позицию с меню и переименовать. Настроить отображение каждой из этих двух позиций в зависимости от версии сайта. Опубликовать меню оптимизированное под мобильные устройства в новой позиции.

Ну, в этом есть резон. Только позволит ли protostar добавить позицию - надо глянуть.
Однозначно, спасибо за идею.

Только позволит ли protostar добавить позицию - надо глянуть.

Позволит, но сам protostar может быть затерт при обновлении. Лучше клонировать шаблон с новым именем и редактировать уже его под себя.

Позволит, но сам protostar может быть затерт при обновлении.

100% - затрет при обновлении - Клонировать это не сложно - Конечно же - это правильно !

Сам шаблон переименован. Но, если честно, не представляю, как конкретно указать, чтобы при разрешении экрана таком-то брался для меню модуль такой-то....
Код в index.php такой:
<?php if ($this->countModules('position-1')) : ?>
                                <nav class="navigation" role="navigation">
                                    <div class="navbar pull-left">
                                        <a class="btn btn-navbar collapsed" data-toggle="collapse"
                                           data-target=".nav-collapse">
                                            <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </a>
                                    </div>
                                    <div class="nav-collapse">
                                        <jdoc:include type="modules" name="position-1" style="none"/>
                                    </div>
                                </nav>
                            <?php endif; ?>
Позиция 1 для меню в протостаре

Добавить нужные CSS классы. например nav-pc и nav-mobi. Ну и стилями через @media скрывать и показывать эти классы - display:none, display:block.

Вариант без дублирования модулей, позиций и дополнительных пунктов меню

Копируем содержимое modules/mod_menu/tmpl/ в templates/ВАШ_ШАБЛОН/html/mod_menu чтобы можно было кастомизировать шаблон модуля и не зависеть от случайного "затирания" при обновлении.

В файле templates/protostar/html/mod_menu/default.php ищем фрагмент кода
   
==> echo '<ul class="nav-child unstyled small">';
// это открывающий тег ul для каждого нового дочернего списка

Изменяем, например, на echo '<i class="subMenuToggler">▼</i><ul class="nav-child unstyled small">';
И рядом с пунктом меню, который имеет вложение (дочерние элементы) будет выводиться стрелочка.

клику на элемент открываем/скрываем дочерний список.

Добавляем соль/сахар по вкусу дописываем CSS

Спасибо большое! Будем разбираться!

У меня стоит такой код:
if ($item->deeper)
   {
      $class .= ' deeper';
   }

У меня стоит такой код:
if ($item->deeper)
   {
      $class .= ' deeper';
   }

смотрите внимательно до конца страницы