Logo overlapping content below

Hi dondela,

Please try to add this CSS code in Enfold > General Styling > Quick CSS:

.responsive #top #header #header_main .inner-container .logo, 
.responsive #top #header .logo a {
    height: 148px;
    overflow: visible;
}

.responsive #top #header .logo img {
    width: 300px;
    max-width: 300px;
    height: 222px;
    max-height: 222px;
}

Hope it helps.

Best regards,
Nikko

Hi dondela,

I’m glad that we could help you :)
To make it only run for desktop and make it a little lower, please replace the code I gave with this one:

@media only screen and (min-width:1080px) {
  .responsive #top #header #header_main .inner-container .logo, 
  .responsive #top #header .logo a {
    height: 148px;
    overflow: visible;
  }

  .responsive #top #header #header_main .inner-container .logo {
    transform: translateY(55%);
  }

  .responsive #top #header .logo img {
    width: 300px;
    max-width: 300px;
    height: 222px;
    max-height: 222px;
  }
}

The code to lower it a bit is:

.responsive #top #header #header_main .inner-container .logo {
    transform: translateY(55%);
}

The old value was 50%, so just increase or decrease the value as you see fit.

Best regards,
Nikko

Hi dondela,

I’m glad that we could help you :)
Thanks for using Enfold and have a great weekend!

Best regards,
Nikko