Косяк с меню - помогите разобраться

Потому что вы его изначально задвинули за другой край экрана и браузер не может плавно выдвинуть справа то, что задвинуто за левый край экрана.
Уберите из стилей right (или auto поставьте) и сразу задайте left.

А вообще рекомендую для подобных штук использовать transform: translateX().

 

Проблема в том, что icon = null.

А что это за консоль, прямо в Сублиме?

 

Из-за того, что код срабатывает раньше завершения инициализации DOM.
Вариантов решения два: запускать код после инициализации DOM, либо слушать не на конкретном элементе, а на document (этот вариант ещё и при динамической структуре страницы спасёт от проблем).

Код:

$(document).ready(function(){
    //первый вариант
});

$(document).on('click', '#element', function(){
    //второй вариант
});

 

Я не понимаю о чём речь. Я не вижу, чтоб при появлении меню что-либо съезжало.

А ещё непонятно, зачем у ссылки на личный кабинет (.ic1) абсолютное позиционирование и высота 100%, из-за которой ссылка выползает за пределы шапки (это видно, если подсветить блок через инструменты разработчика).
Абсолютное позиционирование используется только в исключительных случаях, а в адаптивной вёрстке оно особенно противопоказано без крайней необходимости.

 

Как оказалось, проблема есть только в Хроме (ну, или точнее, её нет в Мозилле, где я смотрел изначально).

Так нельзя делать! js вообще не должен учавствовать в вёрстке. То есть, с выключенным js сайт должен выглядеть точно так же, как и с включённым, разве что не реагировать на взаимодействие пользователя с элементами, которые обрабатываются через js.
Ну и в результате получилось, что на блоке #area висит "right: 50%", из-за чего этот блок заезжает на меню шапки и возвращается назад только при появлении меню.

Вообще, у вас там сейчас какая-то жуткая фигня с js. Выкиньте весь код, который влияет на вёрстку и тогда я смогу посмотреть, что не так, ибо сейчас там всё ездит туда-сюда из-за js.


И ещё одно: не добавляйте через js стили прямо на блоки - используйте классы! То есть, пусть js при активации какого-то элемента вешает на него определённый класс, а при деактивации - снимает. А все стили уже будут в этом классе.

 

Как я уже говорил, научитесь понимать структуру страницы!

Быстрый фикс - это повесить на блок .city_select - overflow: hidden. А вообще, суть в том, что меню городов в закрытом виде растягивает страницу вправо.
Я не могу понять, зачем вы мобильное меню городов вообще завернули в тело страницы. Я сначало было подумал, что вы пытались сделать общее меню для десктопной и мобильной версии, но нет, они разные. А если они разные, то мобильную версию вообще можно разместить отдельный блоком в body и оно не будет влиять на другие элементы!

 

Разница коллосальная! Изменение поведения на разной ширине указывает на медиа квери, а через них могут любые стили быть изменены как угодно.

В вашем случае проблема здесь: http://testbcard.bootstrap.dtraduga.vh55.hosterby.com/assets/css/adaptive.css блок, который начинается с

Код:

@media all and (max-width: 991px){

Из-за того, что какие-то из этих стилей перестают действовать на ширени больше 991px и происходит описанное поведение.

 

Суть не в том вверх или вниз, суть в том, что оно должно быть прямым потомком body. При этом оно всё так же может выезжать из-за края экрана.

 

А зачем там такие селекторы:

Код:

[id='ischezayka']

?

Скобочный вариант обычно используется для выбора по атрибутам, для которых нет других возможностей обращения через CSS, а в случае id - это просто усложнение кода.