如何使此标头在移动设备上看起来更好？答案

【问题标题】：How can I make this header look better on mobile devices?如何使此标头在移动设备上看起来更好？
【发布时间】：2018-03-28 04:05:48
【问题描述】：

https://blendbee.com

这是一个 WordPress 网站。对于较小的屏幕尺寸，标题的顶部需要一些样式改进：

将徽标居中
徽标上方有一些填充或边距（因此它不会触及顶部栏）
菜单图标上方和下方的空格更少

这是当前的 HTML 代码：

<div class="header-wrap">
<header id="header" class="site-header " role="banner">
<div class="row">
<div class="large-12 small-12 columns">
<div class="logo">
<a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home">
<img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png">
<img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie">
<noscript>&lt;img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee &amp;#8211; Your Tea. Your Way.'&gt;</noscript>
</a>
</div>
<div id="mobile-menu-button" class="show-for-small">
<a class="secondary button" id="mobileMenuButton" href="#mobile-menu">
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
<span class="mobile-menu-icon"></span>
</a>
</div>
</div>
</div>
</header>
</div>

及相关CSS：

@media screen and (max-width: 767px) {   
        .mix.half.mix_all {
            width: 50%;
            float: left;
        }

        .mix.mix_all {
            width: 100%;
        }

        .sidebar.large-3.small-12.columns {
            width: 100%;
            float: none;
        }

        #soc-icons-wrap.closed {
            margin-bottom: 20px;
            height: 50px;

        }

        .large-6.small-12.columns p{
            width: 100% !important;
        }

        #header.scroll-to-fixed {
            position: static;
        }  

    }   

    #mobile-menu-button .button {
        margin-bottom: 0;
        padding: 0.75em 0.5em;
        width: auto
    }

    .mobile-menu-icon {
        background: #fff;
        height: 0.25em;
        width: 2.5em;
        display: block;
    }

    .mobile-menu-icon + .mobile-menu-icon {
        margin: 0.25em 0 0
    }

    @media only screen and (min-width: 767px) {
        body.admin-bar #header.scroll-to-fixed {
            top: 32px;
        }

    }

    @media only screen and (max-width: 767px) {
        .logo {
            float: none;
            text-align: center;
        }


        #header.scroll-to-fixed {
            position: static !important;
            height: auto;
            width: auto;
            border-bottom: none;
            }

        #header.scroll-to-fixed .logo {
            width: 300px;
            padding-top: 20px;
            position: static;
            top: 0;
            margin: 0 auto;
             }


        #header.scroll-to-fixed .logo img {
            max-height: 140px;
            width: 100%;
            -webkit-transition: none;
            -moz-transition: none;
            transition: none;
            }

        #mobile-menu .tiled-menu {
            float: none;
            margin: 0;
            padding: 0;
        }

        #mobile-menu .main-menu-item {
            float: none;
            width: 100% !important;
        }

        #mobile-menu .menu-tile {
            height: 60px !important;
            background-image: none !important;
        }

        #mobile-menu .item-title,
        #mobile-menu .tiled-menu > .menu-item-language > a {
            top: 5px;
            font-size: 20px;
            left: 25px;
        }

        #mobile-menu .tile-icon,
        #mobile-menu .tiled-menu > .menu-item-language:before {
            right: 10%;
            width: auto;
        }

        #mobile-menu .tiled-menu > .menu-item-language {
            height: 60px !important;
        }

        #mobile-menu .style-metro .sub-menu {
            padding-top: 3px;
        }
    }    

    @media only screen and (min-width: 640px) and (max-width: 1024px) {
        .tiled-menu .sub-menu {
            position: absolute;
        }

        .tiled-menu {
            text-align: center;
        }

        .main-menu-item {
            text-align: left;
        }


        .tiled-menu .metro-menu-item .sub-menu {
            position: absolute;
        }

    }

    wrapper i {
        margin: 84px 0 0 110px;

    }

    .entry-header .entry-meta .entry-tags {
        margin-left: 0;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
        position: relative;
        top: 12px;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
        width: 33%;
        margin-top: 20px;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
        padding: 18px 5px;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
        width: 13%;
        margin-top: 20px;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
        width: 33%;
        margin-top: 20px;
    }

    .site-header {
        border-bottom: none;
    }

    ol ul, ul ol, ul ul, ol ol {
        -webkit-margin-before: 0px;
        -webkit-margin-after: 10px;
    }

    .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
        float: left;
        width: 70%;
        text-align: left;
        margin-top: 0;
    }


    @media only screen and (min-width: 320px) and (max-width: 767px) {
        .tiled-menu {
            left: -3px !important;
        }

        .tiled-menu>li>ul {
            padding-top: 0;
        }

    }


    @media screen and (max-width: 320px) {    
        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
            text-align: center;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
            margin-left: 28%;
            margin-top: 0;
            width: 52%;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
            margin-top:0 ;
        }

        .large-3.small-12.columns input{
            width: 145px;
        } 

    }

    @media screen and (min-width: 321px) and (max-width: 480px) {       
        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
            text-align: center;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
            text-align: center;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
            margin-left: 36%;
            margin-top: 0;
            width: 35%;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
            margin-top:0 ;
        }

        .large-3.small-12.columns input{
            width: 148px;
        }
    }

       @media screen and (min-width: 480px) and (max-width: 800px) {

        .site-header .logo {
            margin: 0 auto 20px;
        }

        .site-header.scroll-to-fixed .logo  {
            margin: 0;
        }

    }

    @media screen and (min-width: 481px) and (max-width: 568px) {
        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
            text-align: center;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
            margin-left: 38%;
            margin-top: 0;
            width: 30%;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
            margin-top:0 ;
        }

        .large-3.small-12.columns input{
            width: 149px;
        }

    }

    @media screen and (min-width: 569px) and (max-width: 600px) {

        .category-submenu .sub-nav .sub-nav dd {
            margin-left: 0.8rem !important;
            margin-bottom: 0;
        }

        .mix .entry-thumbnail img {
            width: 100% !important;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
            text-align: center;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
            margin-left: 38%;
            margin-top: 0;
            width: 28%;
        }

        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
            margin-top:0 ;
        }

        .large-3.small-12.columns input{
            width: 148px;
        }

        .pricetable-column {width: 50% !important;}
    }


        @media screen and (min-width: 768px) and (max-width: 800px) {


            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
                float: left;
                width: 56%;
                text-align: left;
                margin-top: 0;

            }


            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
                width: 13%;
                margin-top: 20px;
            }

            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                width: 26%;
                margin-top: 20px;
            }

        }


        @media screen and (min-width: 768px) and (max-width: 1000px) {
            .logo {
                float: none;
                margin: 0 auto;
            }

            #header.scroll-to-fixed .logo {
                display: none;
            }

            .main-menu-item {
                display: inline-block;
                margin-left: 0;
                float: none;
                text-align: left;}

            .tiled-menu {
                float: none;
                text-align: center;
            }

                }

    @media screen and (min-width: 640px) and (max-width: 767px) {
        .tiled-menu>li>ul {
            padding-top: 25px;
        }
    }

如果有人可以提供帮助，我将不胜感激 - 谢谢 :)

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布 Minimal, Complete, and Verifiable example (MCVE) 来证明您的问题将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
对不起@j08691 - 更新了！

标签： css wordpress responsive-design

【解决方案1】：

首先 - 尝试使用此代码使您的徽标居中并在顶部添加一些填充：

.logo {
    padding-top: 50px;
    width: 280px;
    margin: auto;
}

当您打开 customizer 时，在“自定义 CSS”部分输入此代码。

第二 - 此代码用于删除菜单图标下方的一些空白：

#mobile-menu-button {float: none;text-align: center;}

在 responsive.min.css 文件中替换这部分。

第三 - 此代码用于删除菜单图标上方的一些空白：

#mobile-menu-button {
    margin: 1rem 0 0;
}

在foundation.css文件中替换这部分。

如您所见，它有效：

【讨论】：