在移动网站的标题中对齐元素

Question

My goal is to get both the menu icon and settings icon inline whilst maintaining the header's padding on the mobile site.

Note: the site isn't responsive through changing browser window size, but does output mobile site if you change device inside Chrome developer tools.

For some reason, the right-hand settings button is not affected by the header's top-padding: 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>

And this my custom CSS code at present

.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%);
}

Here is my site: http://goo.gl/613dqx

Answer 1

You have this css rule, which if you change to 20px works. Also, the button has some btn classes that are positioned absolute so probably that is why the element isn't affected by the padding.

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