防止站点导航重叠标题答案

【问题标题】：Preventing Site-Navigation Overlapping Header防止站点导航重叠标题
【发布时间】：2017-11-20 13:06:20
【问题描述】：

我的网站是 www.rosstheexplorer.com。

当浏览器宽 1302 像素或在移动设备上查看时，我喜欢我的网站的外观。

虽然在 600 像素 - 1302 像素之间，菜单与标题重叠，这确实令人沮丧。

这是我的 header.php

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Penscratch
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>



</head>

<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div >

<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">


</div>

 </div>
<div >
    <nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #site-navigation -->

</div>
<div >

<div id="page" class="hfeed site">


<header id="masthead" class="site-header" role="banner">



        <div class="site-branding">
            <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>



    </header><!-- #masthead -->

    <div id="content" class="site-content">
        <?php if ( get_header_image() ) : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">

            </a>
        <?php endif;  // End header image check. ?>

</div>

这是我的附加 CSS

@media screen and (min-width: 661px) {
        .mobile-header-img {
            display: none;

        }
    }

    @media screen and (max-width: 660px) {
        .header-img {
            display: none;

        }
    }

*.header img {
  max-width: none;
  width: 100%;
}   


@media screen and (min-width: 75em)
{
  .site {
    max-width: 1153px;
    margin: -50px auto;
    padding: 54px 108px;
  }
}


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

.menu li li a {

font-size: 0.8em;

    border: 1px rgb(56, 57, 59) 


}

}


@media screen and (max-width: 799px) {

.menu li a {

font-size: 1.2em;

    color: black; 

    border: 3px rgb(56, 57, 59); 


}

}

@media screen and (max-width: 799px) {

.menu ul li {
     border-bottom: 1px solid lightgrey;


}

}

@media screen and (max-width: 799px) {
.main-navigation li:hover > a
{color: grey}

}


@media screen and (max-width: 799px) {

.menu li li a {

font-size: 0.8em;


    border: 3px rgb(56, 57, 59); 
color: grey; 



}

}


.main-navigation {
   margin-top: 437px;



}

@media screen and (min-width: 800px) {
.main-navigation {
        padding-top: 0px;

    background-color:  rgb(56, 57, 59) ;
    font-size: 1.5125em;
}
}



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


.main-navigation ul ul

{

font-size: 0.8em;
    background-color:  rgb(56, 57, 59) ;

    border: 1px rgb(56, 57, 59) ;

}

}




@media screen and (max-width: 799px) {
.main-navigation {
        margin-bottom: -20px;


}
}

.site-header {
    border-bottom: 0px solid #eee;

}

我的尝试

在 header.php 中，我尝试将导航菜单和标题放在单独的 div 中，然后尝试诸如“div style = float:left”和“div style = clear:both”之类的操作。
在 Additional CSS 中，我尝试更改 .main-navigation 的位置，尝试了静态、粘性和绝对。
在附加 CSS 中，我将 margin-top:XYZpx 添加到 .main-navigation。如果 XYZpx 足够大，它将防止重叠，但有时也会在导航菜单和标题图像之间留下大量空白，这是我不想要的。我希望这两个元素整齐地并排放置。我知道我可以在多个媒体查询中嵌套 .main-navigation 并更改每个媒体查询的 margin-top 值，但这似乎非常低效。

有人有更简单的解决方案吗？

【问题讨论】：

标签： php css wordpress header navigation

【解决方案1】：

存在三个问题：

您的班级body.custom-background 标签具有background-image
属性，并且从那里加载的图像位于您要使用的标题图像后面。本质上，你是加载两张图片，你应该加载一张。解决这个问题，我们
需要使用
重置它
```
body.custom-background {
background-image: none;
}
```
我在这里引用RoToRa's 的答案，因为它更优雅，我可以永远希望成为。

HTML 中的图像是内联元素，默认放置在字体基线，所以你看到的可能是下降者。通常的解决方法是将它们设置为 display: block 或 vertical-align: bottom。

要解决这个问题，我们需要将@media rule 与您的特定截止点一起使用，因为将display 属性单独应用于图像会导致同时加载两个图像。所以我们使用以下方法来解决这个问题：
```
@media screen and (min-width: 661px) {
 img.header-img {
  display: block;
  }
} 
```
您的导航菜单顶部有一个白色边框，但它没有边距重置。为了解决这个问题，我们使用以下方法重置两者：
```
@media screen and (min-width: 800px) {
.main-navigation {
margin: 0 auto;
border-top: none;
}
}
```

现在我们尝试将它们放在 CSS 表的底部，看看会发生什么

body.custom-background {
  background-image: none;
}

@media screen and (min-width: 800px) 
  {
  .main-navigation {
    margin: 0 auto;
    border-top: none;
  }
}

@media screen and (min-width: 661px) {
  img.header-img {
    display: block;
  }
}

【讨论】：

你太棒了:)
此代码在大屏幕设备上完美运行。我将如何修改代码使其也适用于手机？谢谢
很高兴知道。我回答了你的问题here