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

【问题标题】：Preventing Site-Navigation Overlapping Header On Mobile Devices防止移动设备上的站点导航重叠标头
【发布时间】：2017-11-26 14:48:25
【问题描述】：

我的网站是 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;
  }
}

【问题讨论】：

标签： css wordpress mobile background navigationbar

【解决方案1】：

发生这种情况是因为您的移动导航菜单有负底部边距。因此，它只是从其下方“拉”内容。

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

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

【讨论】：