Problems with margin between header and body content

Support
#1

I’m having an issue with margins. The body content of my site is disappearing behind the header.

Everything looks fine on mobile and full screen but disappears on almost any other size.

vs

#2

Hello There,

Thanks for writing in! I have inspected your site and I can see that you added a custom css code to fix the issue. You have this code:

@media only screen and (max-width: 1274px) and (min-width: 980px)  {
  a.x-brand.img {
    float: left;
    width: 12%;
  }

  nav.x-nav-wrap.desktop {
    width: 82%;
    float: left;
  }

  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
  }
}

Did this code resolves the issue? As I have checked it, I could no longer replicate the issue. Please give us further clarifications.

Thank you.

#3

It has worked with the exception of two very specific screen sizes.

and

#4

Hey There,

I have responded your other thread: https://theme.co/apex/forum/t/logo-on-navbar/28731/8
Please check it out to resolve this issue.

Thanks.

#5

This actually made the issue worse, so I’ve reverted back to the previous css, which still displays the two problematic screen sizes.

#6

Hi jbutler97 ,

In your CSS snippet, change the (max-width: 1274px) to (max-width: 1300px) and change:

nav.x-nav-wrap.desktop {
    width: 82%;
    float: left;
  }

to:

nav.x-nav-wrap.desktop {
    width: 85%;
    float: left;
  }

That should resolve this issue on both mentioned screen sizes.

Thanks,

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.