モバイルデバイス上のサイトナビゲーション重複ヘッダーの防止

Question

私のウェブサイトはwww.rosstheexplorer.comです。

私は最近、次のコードを与えられた - 非モバイルデバイス上

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

これは私がH1およびナビゲーションメニューを重ねプラグインで持っていた問題を解決しました。モバイルデバイスにうんざりすると、問題は解決しません。

以下のコードを変更してモバイルデバイスの問題を解決しようとしましたが、悲しいことに希望の結果が得られませんでした。誰にでも提案はありますか？

body.custom-background { 
    background-image: none; 
} 

@media screen and (min-width: 1px) 
    { 
    .main-navigation { 
    margin: 0 auto; 
    border-top: none; 
    } 
} 

@media screen and (min-width: 661px) { 
    img.header-img { 
    display: block; 
    } 
} 


@media screen and (max-width: 660px) { 
    img.mobile-header-img { 
    display: block; 
    } 
} 

Answer 1

あなたの携帯ナビゲーションメニューが負下余裕を持っているので、これがoccures。そのため、「は」のコンテンツをその下から引っ張り出します。あなたはそのような下マージンをリセットする必要があることを修正するには

...

@media screen and (max-width: 799px){ 
    .main-navigation { 
     margin-bottom: 0; 
    } 
}