Это меню тут и было только под секцией header . И оно работает как надо.
Задача была просто сделать его компактней на мобильных устройствах в одну строку с логотипом, поэтому я скопировал всё меню в header, абсолютным позиционированием настроил отображение кнопки там где надо и всё.
И поэтому получились отличия от оригинала в том что:
1. У меню родителем стал header который прилипает к top: 0;
2. И самой верхнему контейнеру меню добавлено postition: absolute;
Вот ниже код касаемо меню из общего скрипта сайта..
Хотел узнать может полный путь указать вместо #menu .dropdown-menu... Или без разницы - будет найден всё равно #menu .dropdown-menu - неважно куда вложен?
// Menu
$('#menu .dropdown-menu').each(function() {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
var i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
P.S. провел сейчас эксперимент - удалил второе меню вообще (которое display: none;) на мобильных всё заработало как нужно. Видимо мешает display: none; только как - не пойму.
В связи с чем вопрос - есть ли возможность js удалить элемент и все его вложения при определенной ширине экрана, и соответственно показать при другой широте экрана?
То есть не просто добавлять display: none;, а полностью убирать элемент из DOM.