Съезжает лого в адаптивной версии сайта. Как исправить?

Question

ECrash @ECrash

HTML
CSS

Съезжает лого в адаптивной версии сайта. Как исправить?

Делаю сайт в конструкторе uKit.
Задача - меню при загрузке страницы сайта должно иметь прозрачный фон. При прокрутке страницы меню остается закрепленным по верхней части экрана и фон меняется на черный.
Лого в меню сделано текстом.
По итогу в адаптивной версии в вертикальной и горизонтальной ориентации телефона Лого съезжает чуть ниже относительно бургера. Скрины ниже (Лого замыленный участок).

Был использован следующий код:

<style>
.sticky {
	z-index: 300;
	position: fixed!important;
	top: 0px!important;	/* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, при фиксированном сверху меню */
}	
  #ul-id-1338-6-symbol {transition-duration:.5s;}
  #ul-content {margin-top: 0px!important;}
  div.transparent {background:none!important;}
@media screen and (max-width: 506px) {
  #ul-id-1338-9-symbol > div > div > div > div > div > div > span:nth-child(1) {display:none!important;}
  a.HXO9zGZ___link > span{font-size: 24px!important;}
}
</style>

Он делал отображение Лого в вертикальном положении как положено, в горизонтальном положении Лого по прежнему съезжало. При этом в обеих положениях размер шрифта в подвале сайта прыгал.
Тогда оставил следующий код:

<style>
.sticky {
	z-index: 300;
	position: fixed!important;
	top: 0px!important;	/* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, при фиксированном сверху меню */
}	
  #ul-id-1338-6-symbol {transition-duration:.5s;}
  #ul-content {margin-top: 0px!important;}
  div.transparent {background:none!important;}
@media screen and (max-width: 506px) {
  #ul-id-1338-9-symbol > div > div > div > div > div > div > span:nth-child(1) {display:none!important;}
}
</style>

Он делал отображение Лого в вертикальном положении как положено, в горизонтальном положении Лого по прежнему съезжало. Размер шрифта в подвале сайта стал отображаться как положено.

Как исправить код, чтобы Лого не съезжало в адаптивной версии и при горизонтальном положении экрана?
Спасибо!