css - 如何使此 header 在移动设备上看起来更好？

Question

https://blendbee.com

这是一个 WordPress 网站。页眉的顶部需要针对较小的屏幕尺寸进行一些样式改进:

1. 将 Logo 居中
2. Logo 上方的一些填充或边距(因此它不会触及顶栏)
3. 减少菜单图标上方和下方的空白

这是当前的 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;
        }
    }  

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

Answer 1

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

.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文件中替换这部分。

如您所见，它有效: