Довести до ума адаптивное меню на Bootstrap

Есть сайт на bootstrap с некоторым кастомным css. На нем не вполне адекватно работает меню при изменении размеров окна.

Нужно это все поправить.

Сайт: psy-study.ru

Задачи:

1) при уменьшении окна (мобильная версия), кнопка меню выглядит как кнопка, а не как иконка. При рефреше (на маленьком окне) выглядит как надо.

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

2) в мобильном варианте меню выпадает с рывком из-за обтекания кнопки меню. 

Нужно сделать так, чтобы меню сразу выпадало ниже кнопки меню и заполняло всю ширину экрана. Оно и сейчас заполняет, но уже после того, как раскрывается второй пункт. А нужно - сразу. В общем, чтобы не дергалось, а выглядело в раскрытом состоянии так же, как сейчас.

При этом всем, нужно по максимуму использовать bootstrap, а не писать свое меню с нуля, не подключать других библиотек и т.д. То есть, как можно меньше затронуть текущий код. Желательно обойтись только правками css и немного - html.