防止站点导航重叠标题

时间:2017-06-18 03:34:10

标签: php css wordpress header navigation

我的网站是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;

}

我尝试过什么

  1. 在header.php中,我尝试将导航菜单和标题放在单独的div中,然后尝试像&#34; div style = float:left&#34;和&#34; div style = clear:both&#34;。
  2. 在附加CSS中我尝试改变.main-navigation的位置,我试过静态,粘性和绝对。
  3. 在附加CSS中,我添加了margin-top:XYZpx到.main-navigation。如果XYZpx足够大,它可以防止重叠,但它有时会在导航菜单和标题图像之间留下大量的空白,这是我不想要的。我希望这两个元素并排坐在一起。我知道我可以在多个媒体查询中嵌套.main-navigation并更改每个媒体查询的margin-top值,但这似乎非常低效。
  4. 有人有更简单的解决方案吗?

1 个答案:

答案 0 :(得分:1)

有三个问题:

  1. 您的班级body.custom-background标记包含background-image 属性,并从那里加载一个图像,位于您要使用的标题图像后面。实质上,你是 加载两个图像,你应该加载一个。解决我们的问题 需要使用

    重置它
    body.custom-background {
    background-image: none;
    }
    
  2. 我在这里引用RoToRa's回答,因为我能说得更加有力 永远希望成为。

      

    HTML中的图像是内联元素,默认情况下放在   字体基线,所以你看到的可能是空间   伸。通常的方法是将它们设置为   display: blockvertical-align: bottom

    要解决此问题,我们需要将@media rule与您的特定截止点一起使用,因为将display属性单独应用于图像将导致两个图像同时加载。所以我们使用以下内容来解决这个问题:

    @media screen and (min-width: 661px) {
     img.header-img {
      display: block;
      }
    } 
    
  3. 您的导航菜单顶部有一个白色边框,但它没有 边距重置。为了解决这个问题,我们使用以下方法重置了两者:

    @media screen and (min-width: 800px) {
    .main-navigation {
    margin: 0 auto;
    border-top: none;
    }
    }
    
  4. 现在我们尝试将它们放在CSS表的底部,看看会发生什么

    &#13;
    &#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;
    &#13;
    &#13;