Anton, Не вижу особенной разницы в отображении в мобильном хроме и яндекс.браузере.
Может, у вас что-то закешировалось?
Или покажете проблему на скринах?
1. Браузеры по разному рендерят шрифты. С этим вы ничего не сделаете.
2. Гугл-фонтс сначала смотрит нет ли локально установленного шрифта. Если есть отображается он.
У вас 2 пути: открыть инспектор кода и посмотреть:
затем начать делать аналогично. С конкретными вопросами с тем, что не получилось вернуться сюда.
В этот вариант еще можно добавить "погуглить", потому что статей "как анимировать гамбургер в крестик" и "как открыть блок по клику на другой" вагон и маленькая тележка.
На большинстве сайтов блоки никуда не переместятся со временем, "как прибили, так и держатся". Поэтому, верстальщики используют от БЭМа только способ именования классов, да и то, далеко не всегда чистое,а скорее БЭМо-подобное.
1. Ретина не имеет отношения к проблеме, только ос и браузер.
2. Выложенный вами код в комментарии - это не весь код, участвующий в проблеме.
3. Выкладывайте сюда: jsfiddle.net или аналогичную песочницу.
Самый простой способ избавиться от этого вопроса, это открыть фотошоп и использовать там save for web с разными настройками и в разных форматах. Глазками смотрите устраивает ли качество и оцениваете получившийся размер. И заодно логика, если в изображении есть прозрачные или полупрозрачные пиксели, то логично, что это не jpg.
webp еще не всюду поддерживается, но про него тоже почитайте.
И про ретину не забудьте.
Может, у вас что-то закешировалось?
Или покажете проблему на скринах?