Bootstrap 3. Сложное двухстрочное меню. Нужна помощь.

Наверное хороший запил на яваскрипт нужен и просто стилями и классами не обойтись.

На десктопной версии имеем такой вид. Слева лого, в середине двухстрочное меню, справа кнопка - отправить другу (визуально располагаеься на линии разделителя верхней и нижней строчки меню). Меню работает по принципу вкладок - кликаем на первый пункт верхней строчки - получаем набор ссылок в нижней строчке. Кликаем на второй пункт верхней строчки - получаем другой набор ссылок в нижней строчке...

В мобильном разрешении менюшка должна быть в свернутом виде: слева гамбургер - лого посередине - справа иконка поиска...

Уже спрашивал на стековерфлоу...чего-то там тишина, наверное забомбили рубрику новыми вопросами и вопрос никто не видит уже ) Удалось реализовать такое.

ссылка

То есть на сейчас не работает:
1.Меню в мобильной версии не свернуто (показывает после строки с гамбургером, лого и поиском обе строки с меню и подменю). Должно быть свернуто и по клику на гамбургер раскрываться и сворачиватся при повторном клике.
2. При повторном клике на пункты в верхней строчки, нижняя скрывается. Нужно, чтобы не скрывалась.
3. При клике на иконку поиска (в правом верхнем углу и в подменю нижней строки) должна появляться/скрываться форма поиска.

Советую вам открыть проект. Тут просто подсказать не обойдется, нужно вникать и кодить. )