防止站点导航重叠标题

我的网站是www.rosstheexplorer.com。防止站点导航重叠标题

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

尽管在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中，然后尝试诸如“div style = float：left”和“div style = clear：both”之类的东西。
在额外的CSS我试图改变。主导航的位置，我尝试了静态，粘滞和绝对。
在附加CSS中，我将margin-top：XYZpx添加到.main-navigation。如果XYZpx足够大，它会阻止重叠，但它有时会在导航菜单和标题图像之间留下巨大的空白，我不想要这些空白。我希望这两个元素并排整齐地坐在一起。我知道我可以在多个媒体查询中嵌套.main-navigation，并为每个媒体查询更改margin-top值，但这似乎效率很低。

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

来源

2017-06-18 Ross Symonds

有三个问题：

你的类标签具有background-image
财产并没有，坐在你要使用的标题图片背后从那里加载图像。本质上，你是加载两个图像，你应该加载一个。解决我们
需要使用
```
body.custom-background { 
background-image: none; 
} 
```
我在这里引用RoToRa's的答案，因为它是我能希望以后更加elequant重置。在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; 
 
    } 
 
}

来源

2017-06-18 06:39:09

你真棒:) –

没问题。很高兴它的工作。 –

防止站点导航重叠标题

回答

相关问题