Модуль меню с dropdown на всю ширину контейнера nav - Поиск компонентов, модулей, плагинов

Стандартный модуль меню выводит выпадающий список (li) строго привязанный к позиции родителя (ul)
Задача вывести выпадающий список по ширине контейнера nav
Приложенная схема, надеюсь, показывает, что нужно.
Чисто версткой сделать не смог, теоретически нужен как минимум скрипт, в которых я не силен.
Поделитесь, кто знает, готовым решением - в идеале модулем.  Платные варианты, варез не проходят.

это делается стандартной версткой
родитель дропдауна - position:intial;
весь нав - position: relative;

Прошу прощения за непонятливость, сказывается 2 года "не в теме", на Ваш вариант пока не получается.
Впрочем по порядку с иллюстрациями (меняю фаербагом)
Шаблон использую Master2 от YooThem , модуль меню там переопределен от стокового.

Структуру меню вижу так
Скрин 1, для визуализации dropdown включены.
Присваиваю родителю  position: inherit;, исходный: действительно dropdown "отвязались от родителя, при этом позиция потомка
скрин2.
Кстати
привязаны к родителю.
скрин3.
Казалось бы остается правильно спозиционировать и разместить по горизонтали.
Но не тут то было:
когда вношу правки в свой файл *.css отказывается работать скрипт dropdown - меню не "выпадает"?!
Если есть время и настроение, подскажите где порылась собака.

там же less, его надо править, а оригинальные файлы стилей лучше не трогать, переопределять либо через свой лесс либо дописывать в custom.css

с юикитом немного по другому надо, там дропдаун скриптом выпадает, с абсолютным позиционированием, поэтому помимо изменения позиционирования родителей также необходимо c импортантом задавать необходимый left и width

там же less, его надо править, а оригинальные файлы стилей лучше не трогать, переопределять либо через свой лесс либо дописывать в custom.css

Так и делаю, см. пост выше

когда вношу правки в свой файл *.css отказывается работать скрипт dropdown - меню не "выпадает"?!

поэтому помимо изменения позиционирования родителей также необходимо c импортантом задавать необходимый left и width

с этим тоже понятно, но до этого не дошли, т.к.

с юикитом немного по другому надо, там дропдаун скриптом выпадает,

скрипту мешают работать мои новые стили.
Вот и спрашиваю как с этим справиться.
Очень надеюсь на помощь.
ЗЫ Поскольку изначально не видел выхода в верстке, прст расположил в ветке моделей. И дублировать не по феншую, но может разместить в ветке верстки/дизайна. Глядишь еще народ подтянется?

Все не так.
Для того, чтобы выпадающее меню было во всю ширину, нужно работать с атрибутом родительского тега li:
добавить в массив параметр justify

data-uk-dropdown="{'preventflip':'y','justify':'body'}"

Это нужно переопределять файл layouts/widget.php шаблона (или стиля, если задан)

Можно поподробней как это сделать.

В файле widget.php найти блок кода где рендерится меню
Внутри условия, где обрабатывается позиция menu, добавить строчку
        
Если у вас меню не слишком переделано - должно помочь

fbr спасибо большое, пошептало.
Меню во всю ширину. Дольше дело CSS.

хм, я обходился без правок widget.php, наверное по причине того, что не каждое выпадающее меню необходимо было на всю ширину

С этим атрибутом можно разные интересные вещи делать

Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать data-uk-dropdown не к body,
а к (данном случае) uk-container (отстоит от body на  padding: 0 35px).
Скрипт вычисляет для каждого родителя data-uk-dropdown расстояние до начала страницы
и жестко прописывает стиль data-uk-dropdown, к примеру
т.е. нажно -377 + 35

вместо body можете подставить любой класс родительского контейнера, например ".tm-navbar"
будет выводить по его ширине

Гениально! Так и делал, точку только не додумался поставить.
Спасибо еще раз.

Раз пошла такая пъянка...
 то может подскажите как, а главное где привязать data-uk-dropdown не к body,
а к (данном случае) uk-container (отстоит от body на  padding: 0 35px).
Скрипт вычисляет для каждого родителя data-uk-dropdown расстояние до начала страницы
и жестко прописывает стиль data-uk-dropdown, к примеру

Код: css

 style="left: 0px;  margin-left: -377.5px;

т.е. нажно -377 + 35

да. примерно так по идее

я приписывал дополнительный класс для ссылки, к которому привязывался: .myclass + .uk-dropdown {тут с импортантом выставлял для нужного дропдауна конкретные значения позиционирования и размеры, left и width, вычислял ручками}

да. примерно так по идее

я приписывал дополнительный класс для ссылки, к которому привязывался: .myclass + .uk-dropdown {тут с импортантом выставлял для нужного дропдауна конкретные значения позиционирования и размеры, left и width, вычислял ручками}

Дык ничего не нужно делать батенька (см. пост выше). Вместо body - класс нужного контейнера!!.
Тем паче ручами это как? А на разных мониторах (панорамных).
Решение супер. Короче нужно учить матчасть 🤔

решение, предложенное fbr - это применится ко всем дропдаунам всего меню, а если нужно только для конкретного? а для остальных не нужно?

В файле widget.php найти блок кода где рендерится меню
Внутри условия, где обрабатывается позиция menu, добавить строчку

на дропдауны меню в остальных позициях не повлияет

не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину

не, речь про одно меню в одной позиции
5 пунктов верхнего уровня, у всех - дропдауны с подменю, но только у одного пункта дропдаун нужен на всю ширину

Alek, Вы не правы. Нельзя быть насколько упрямым и продолжать гнуть свою линию не вникая.
Когда рендерим дропдаун горизонтально, виджет делает главное - вычисляет расстояние родителя от нужного места!
Для установки одного пункта, даже всех, кроме нужного вертикально (исходно) остается убрать вычисленный отступ и ширину (не задумываясь, тобиш ничего не вычисляя), а это дело займет пару минут.