防止移動設備上的站點導航重疊標題

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