painmaker

https://davist11.github.io/jQuery-One-Page-Nav/ меню справа вверху. Вместо надписей делаем как на скрине, а при изменении класса меняем бекграунд. В бутстрепе, если что, есть такая же фича, искать в документах лениво

https://codepen.io/anon/pen/bXbWyZ как вариант

при помощи CSS не сможете изменить скорость скролла. Стили не имеют доступа к параметрам браузера (в котором сконфигурирована скорость прокрутки). вот рабочий пример, как изменить скорость прокрутки страницы jsfiddle.net/36dp03ur

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

"Окружить" инпут див-ом и впихнуть рядом, либо стилизировать сам инпут, а иконку воткнуть через псевдо-селектор after/before. вот пример первого варианта https://codepen.io/anon/pen/ewowRL

https://codepen.io/anon/pen/EBMwBr Вместо иконок i class="fab fa-.. (FontAwesome, если что) юзаете свои img

не совсем внятный скриншот. Надеюсь, мысль уловил https://jsfiddle.net/40s3qv8j/

css code:

.my-class {
 background-image: url('path/to/your/image');
 background-repeat: no-repeat;
 background-position-x: 50%; /* <-- тут подставить свои координаты, на сколько изо сдвинуть по оси Х*/
 background-position-y: 50%; /* <-- то же самое, но по оси У */
}

@media (min-width: 1281px) {

}
@media (min-width: 1025px) and (max-width: 1280px) {
  
}
@media (min-width: 768px) and (max-width: 1024px) {
  
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
}


@media (min-width: 481px) and (max-width: 767px) {
  
}

@media (min-width: 320px) and (max-width: 480px) {
  
}

Все правильно выше сказано https://codepen.io/anon/pen/pXGeNg