Alexandr Alexandrov

Посмотрите на этот пример:
https://www.w3schools.com/howto/tryit.asp?filename...

В примере добавляется класс sticky при скролле, на него сможете определить новый логотип, его позиционирование и отображение\скрытие.

https://sye.dk/sfpg/

Ведь прямо с офф. примера можно скопировать значения transform и подставить к себе, через испектирование.
Например, на правую

transform: translate3d(0px, 0px, -112.5px) rotateX(0deg) rotateY(-56.25deg);

Не совсем ясно что же нужно, но, наверное, чтобы выпадающий блок "не терялся" при ховере?

Пример 1: https://jsfiddle.net/yu3ver/vcghvsyv/
Пример 2: https://jsfiddle.net/yu3ver/kzah26oa/

Загружено не то, шрифт состоит не только из одного *.ttf файла.

Или загружаете всё к себе,

git clone http://github.com/google/material-design-icons/

или берёте по ссылке

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Подробнее google.github.io/material-design-icons/#icon-font-...

Например, jsfiddle.net/yu3ver/dymph4at

Можно и так: https://jsfiddle.net/yu3ver/xzukjdty/

animejs.com/documentation/#cssSelector

Например,

• https://css-tricks.com/snippets/css/media-queries-...
  
• stephen.io/mediaqueries
  
• https://responsivedesign.is/develop/browser-featur...
  

А что ЕСЛИ позиционировать? float: left;

• https://css-tricks.com/almanac/properties/f/float/
  

Например, https://jsfiddle.net/yu3ver/fvxvjv5e/