防止站點導航重疊標題

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

你真棒:) –

沒問題。很高興它的工作。 –

此代碼完美適用於大屏幕設備。我如何修改代碼，以便它也適用於手機？謝謝 –

防止站點導航重疊標題

回答

相關問題