Question

在移动设备上标题被截断，这导致徽标顶部被截断。此问题发生在以下网站上：http://development.blackcountrydesigns.co.uk

我正在为网站构建自定义主题。在浏览器工具中检查时，仅当在移动设备上实际查看时，才出现此问题。在iPhone 6和Sony Xperia XZ1上进行了测试。

这是我的header.php文件：

<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=0'>

    <title><?php echo get_bloginfo('name'); ?> | <?php echo get_the_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class='bravo-logo'>
            <?php if(function_exists('the_custom_logo') && has_custom_logo()) { 
                the_custom_logo();
             } else { ?>
                <a href='<?php get_bloginfo('wpurl'); ?>'><?php echo get_bloginfo('name'); ?></a>
             <?php } ?>
        </div>

        <div class='bravo-main-menu bravo-menu'>
            <?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
        </div>

        <div class='bravo-mobile-menu'>
            <i class='fas fa-bars fa-2x' id='bravo-hamburger'></i>
        </div>
    </header>
    <div class='bravo-vertical-nav'>
        <?php wp_nav_menu(array('theme_location' => 'main-menu', 'item-spacing' => 'discard')); ?>
    </div>

这是我标头的所有相关CSS-请注意，大约有600行CSS，所以我刚刚剥离了文件，只包含了与网站标头相关的CSS：

/* Global/General Styles */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #eee;
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
}

body {
    padding-bottom: 270px;
    position: relative;
    min-height: 100vh;
}

/* Header */
header {
    min-height: 150px;
    display: flex;
    align-items: center;
    border-bottom: 3px solid #1abc9c;
    background-color: #fff;
}

/* Logo */
div.bravo-logo {
    padding: 1rem;
    margin-left: 1.5rem;
}

div.bravo-logo img {
    height: 100px;
    width: auto;
}

@media only screen and (max-width: 450px) {
    div.bravo-logo img {
        width: 90%;
        height: auto;
    }
}

div.bravo-logo a {
    text-decoration: none;
    font-size: 1.5rem;
    color: #4d4d4d;
}

/* Menus */
div.bravo-menu ul {
    list-style-type: none;
}

div.bravo-menu ul li {
    display: inline-block;
}

div.bravo-main-menu {
    align-self: flex-end;
    width: 100%;
    margin-right: 3.5rem;
}

div.bravo-main-menu ul {
    float: right;
}

div.bravo-main-menu ul li a {
    display: block;
    padding: .5rem .75rem;
    text-decoration: none;
    color: #4d4d4d;
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: .15rem;
    transition: .3s;
}

div.bravo-main-menu li.current-menu-item a {
    font-weight: bold;
}

div.bravo-main-menu ul li a:hover {
    background-color: #1abc9c;
    color: #fff;
}

div.bravo-mobile-menu {
    display: none;
    margin-right: 1.75rem;
}

div.bravo-mobile-menu i {
    cursor: pointer;
}

div.bravo-vertical-nav {
    display: none;
}

div.bravo-vertical-nav ul {
    list-style-type: none;
}

div.bravo-vertical-nav ul li {
    text-align: center;
    cursor: pointer;
    padding: .85rem 0;
    background-color: #eee;
    border-bottom: 2px solid #1abc9c;
}

div.bravo-vertical-nav ul li a {
    text-decoration: none;
    color: #1abc9c;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .1rem;
}

@media only screen and (max-width: 1160px) {
    header {
        justify-content: space-between;
    }

    div.bravo-main-menu {
        display: none;
    }

    div.bravo-mobile-menu {
        display: block;
    }
}

@media only screen and (max-width: 1070px) {
    body {
        padding-bottom: 570px;
    }

    header {
        margin-top: -32px !important;
    }

    div#wpadminbar {
        display: none !important;
    }
}

@media only screen and (max-width: 782px) {
    header {
        margin-top: -46px !important;
    }
}

我在两个断点处设置的负边距顶部是为了消除隐藏管理栏时剩余的空间-我尝试使用和不使用这些值，但两者似乎都没有什么不同。我已经尝试过调整页眉和徽标容器上的填充，但由于似乎无法在桌面浏览器中复制错误，所以我很挣扎。

请在下面查看问题的屏幕截图：

Answer 1

由bravo.css?ver=0.0.1，第483行引起：

@media only screen and (max-width: 782px) {
  header {
    margin-top: -46px !important;
  }
}

...会覆盖456行（同一文件）中设置的规则：

@media only screen and (max-width: 1070px) {
  header {
    margin-top: -32px !important;
  }
}

您可能想为此margin-top设置一个不同的值。 -10px看起来不错。

Answer 2

隐藏管理栏时您出了错，不需要负margin-top，将其保留为0。

安装“删除管理栏”插件或将add_filter(‘show_admin_bar’, ‘__return_false’);添加到functions.php，以便在登录时正确隐藏它。

标头在移动设备上被切断

2 个答案: