Bootstrap 3. Сложное двухстрочное меню.

Собственно говоря вот:

https://stackoverflow.com/questions/47773019/bootstrap-3-how-i-can-make-two-rows-navbar-collapsed

Ниже описание что уже есть и что необходимо сделать:

1.Меню в мобильной версии не свернуто (показывает после строки с гамбургером, лого и поиском обе строки с меню и подменю). Должно быть свернуто и по клику на гамбургер раскрываться и сворачиватся при повторном клике.

2. При повторном клике на пункты в верхней строчки, нижняя скрывается. Нужно, чтобы не скрывалась. То есть первая "вкладка" при инициализации всегда открыта.

3. При клике на иконку поиска в правом верхнем углу(мобильная версия) форма поиска должна появляться в "новой строке".  Пункты с иконками поиска в подменю на мобильной версии должны скрываться и быть только на версиях LG, MD, SM. Поведение пунктов с иконками поиска в подменю на этих версиях - по клику на иконку поиска - иконка скрывается, появляется форма приска, по клику за пределами формы - снова появляется иконка поиска.

Итоговое решение должно работать при добавлении дополнтельных пунктов в меню верхнего уровня (еще одна "вкладка") и нижнего уровня. Для чего это все - нужно универсальное одно меню на версии страницы в разных разрешениям, чтобы не администрировать несколько меню на разных разрешениях.

По срокам - до завтра до 16-00. Оплата в ЯД.