Andrej Sharapov

Вы серьезно?)
Сергей, замените className на class и все сработает.

Попробуйте сверстать на flexbox
Для примера, как работает: jsfiddle.net/o7q3gr0x

Ваши блоки, только уберите цвет.

Вроде, все работает. Иконка переписки есть.

css.yoksel.ru/strelki-s-pomoshh-yu-svojstva-border
Пробуйте

уберите white-space: nowrap; и все влезет

media (max-width: 992px) {
#top {
background-color: #4F5F6F !important;
width: 100%;
display: block;
position: relative;
}
}

Можно сделать в виде таблички без внешних отступов 2х14

Если не заморачиваться, то

.secbar {
  margin: -60px 0 0 20px;

присвойте всем блокам айди и в принт пропишите дисплей:ноне для не нужных. :not(.print) тут не нужно.

Можете попробовать через медиа запрос, вроде этого:

.logo1 {
  display: block
}
.logo2 {
  display: none
}
@media (max-width:320px) {
.logo1 {
  display: none
}
.logo2 {
  display: block
}
}

Меньше кода и js не нужен. Тем более ваш бутстрап и так много весит

Как вариант, можно сделать без js
https://jsfiddle.net/qd5hc19a/3/

Тут ничего сложного, просто берете в интернете простое вертикальное меню с выпадающими элементами и прикручиваете к сайту. Только вместо display попробуйте использовать pointer-events + visivility + opacity, иначе ваш каталог не проиндексируется как надо.

Можно.
В стилях пишите что вам нужно и будет так же.

input#file-input {

}

Все верно, блок-2 cдвигается в сторону, относительно позиционирования родителя.
Кстати, использование padding совместно с width/height не рекомендуется. Поэтому, сейчас ваши блоки размером не 200px, а 220.