サイトナビゲーションオーバーラップ防止ヘッダー

私のウェブサイトはwww.rosstheexplorer.comです。サイトナビゲーションオーバーラップ防止ヘッダー

ブラウザが1302pxであるか携帯端末で表示されていると、私のサイトのデザインが大好きです。

メニューが600px〜1302pxの間で重なっていて、本当にイライラしています。

これは、これは私が、私はheader.phpのでは

試みがありどのような私の追加の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の

<?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>

です試したナビゲーションメニューとヘッダーを別々のdivに入れてから、 "div style = float：left"や "div style = clear：both"のようなものを試してみてください。

追加のCSSで、私は.main-navigationの位置を変更しようとしましたが、私は静的で、粘着性があり、絶対的でした。

追加CSSで、私はmargin-top：XYZpxを.main-navigationに追加しました。 XYZpxが十分に大きければ重なり合うのを防ぎますが、ナビゲーションメニューとヘッダーイメージの間に大した空白が残ることもあります。私は2つの要素をきちんと並べて置いて欲しい。複数のメディアクエリでメインナビゲーションを入れ子にし、各メディアクエリのマージントップの値を変更することはできますが、それは非常に非効率的です。

誰かが簡単な解決策を持っていますか？

出典

2017-06-18 Ross Symonds

3つの問題があります。

があなたのクラスタグがbackground-image
性質を持っているし、使用するヘッダー画像の後ろに座って、そこからロードされたイメージがあります。本質的には、あなたはを読み込んで、2つの画像を読み込んでください。我々
ことを修正するためには、それは私が今までなることを期待することができ、よりelequantであるように私はここにRoToRa's答えを引用
```
body.custom-background { 
background-image: none; 
} 
```
を使用してそれをリセットする必要があります。 HTMLで

イメージはそう何を見ていることは、おそらくディセンダーのための空間であり、インライン要素であり、デフォルトでフォントのベースライン上に配置されます。この場合の通常の方法は、 display: blockまたはvertical-align: bottomに設定することです。私たちは、それ自体で画像にdisplayプロパティを適用すると、両方の画像が同時にロードされることにつながりますので、あなたの特定のカットオフポイントで@media ruleを使用する必要があることを修正するには

。だから我々はそれに対処するために、次の使用：
```
@media screen and (min-width: 661px) { 
img.header-img { 
    display: block; 
    } 
} 
```
あなたのnav-メニューは、上に白の境界線を持っており、その余白をリセットする必要はありません。私たちが使用して両方をリセットすることを修正するには、以下：

@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

あなたは素晴らしいです:) –

問題はありません。それがうれしかった。 –

このコードは、大画面デバイスでも機能します。モバイルでも動作するように、コードをどのように変更すればよいですか？ありがとうございました –

サイトナビゲーションオーバーラップ防止ヘッダー

答えて

関連する問題