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

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

这是因为您的移动导航菜单有否定底部边距。因此，它只是＆＃34; 拉＆＃34;来自它下面的内容。

要解决此问题，您需要像这样重置底部边距......

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