防止移动设备上的站点导航重叠标题 [英] Preventing Site-Navigation Overlapping Header On Mobile Devices

问题描述

我的网站是www.rosstheexplorer.com.

My website is www.rosstheexplorer.com.

最近我得到了以下代码-

I was recently given the following code -

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和插件与导航菜单重叠时遇到的问题.恼人的是，在移动设备上，问题仍然存在.

On non mobile devices this solved the problem I was having with H1 and the plugins overlapping the navigation menu. Annoyingly on mobile devices the problem persists.

我试图通过将下面的代码修改为以下内容来解决移动设备上的问题，但可悲的是它没有给我想要的结果.有人有建议吗?

I tried to resolve the problem on mobile devices by modifying the code to the below but it sadly did not give me the desired result. Does anyone have a suggestion?

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

推荐答案

之所以会发生这种情况，是因为您的移动导航菜单的底部底边是边距.因此，它只是从其下方"拉"内容.

This occures because you mobile navigation menu has negative bottom margin. Because of that, it just "pulls" content from underneath it.

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

To fix that you need to reset the bottom margin like so...

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

这篇关于防止移动设备上的站点导航重叠标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！