Question

我的网站是www.rosstheexplorer.com。

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

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

这是我的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中，然后尝试像＆＃34; div style = float：left＆＃34;和＆＃34; div style = clear：both＆＃34;。
在附加CSS中我尝试改变.main-navigation的位置，我试过静态，粘性和绝对。
在附加CSS中，我添加了margin-top：XYZpx到.main-navigation。如果XYZpx足够大，它可以防止重叠，但它有时会在导航菜单和标题图像之间留下大量的空白，这是我不想要的。我希望这两个元素并排坐在一起。我知道我可以在多个媒体查询中嵌套.main-navigation并更改每个媒体查询的margin-top值，但这似乎非常低效。

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

Answer 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表的底部，看看会发生什么

＆＃13;

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;
  }
}

＆＃13;

防止站点导航重叠标题

1 个答案: