Выравнивание элементов в заголовке на мобильном сайте

Question

Моя цель - получить значок значка меню и настроек в строке, поддерживая заполнение заголовка на мобильном сайте.

Примечание: сайт не реагирует на изменение размера окна браузера, но выводит мобильный сайт, если вы меняете устройство внутри инструментов разработчика Chrome.

По какой-то причине кнопка правого выбора не влияет на верхнее заполнение заголовка: 20px ;.

<div data-role="header" class="header-bar ui-header"> 
    <div> 
     <div id="mobileMenuIcon" class="menu-icon"> 
      <div class="menu-icon-bar"></div> 
      <div class="menu-icon-bar"></div> 
      <div class="menu-icon-bar"></div> 
     </div> 
    <h1 class="logo"> 
     <a href="#" rel="external" data-ajax="false" > 
      <img class="mobile-logo" alt="Blog Name" src="<?php echo $website_logo[0];?>" /> 
     </a> 
    </h1> 
    <div class="wrapper-btn-login"> 
     <a data-ajax="false" href="#" class="ui-btn-s icon ui-btn-right click-menu-mobile" data-role="none" data-icon="y"></a> 
    </div> 
</div> 

И это мой собственный код CSS в настоящее время

.menu-icon { 
    display: inline-block; 
} 

.menu-icon-bar { 
    width: 35px; 
    height: 5px; 
    /* background-color: #4F4F4F; */ 
    background-color: black; 
    margin: 6px 0; 
} 


/* Center logo and display inline */ 

h1.logo { 
    display: inline-block; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

Вот мой сайт: http://goo.gl/613dqx

Answer 1

У вас есть это правило CSS, который, если вы смените 20px работы. Кроме того, у кнопки есть некоторые классы btn, которые позиционируются как абсолютные, поэтому, вероятно, поэтому элемент не влияет на заполнение.

.header-bar .ui-btn-s { 
    top: 8px !important; 
    right: 8px; 
}