Preventing Site-Navigation Overlapping Header On M

Question

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

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

Answer 1

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