防止移动设备上的站点导航重叠标题

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