Overlap with centered logo

[gallagherBD]

Hello, I am trying to have an overlapped logo and also have it centered. Here is the CSS I am using:
@media (min-width: 980px) {
.x-logobar {
display: none !important;
visibility: hidden !important;
}
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: center;
width: 306px;
height:120px;
background: url(http://markpainting.gallagherbd.com/wp-content/uploads/2019/11/marks-painting-and-design-service-in-sewell-nj-1.png) no-repeat center center;
background-size: contain;
}
.x-navbar {
border-bottom: 5px solid #cc292b;
}

.x-main {
margin-top: 30px;
}
.x-navbar .x-brand { position: fixed;}
.x-navbar-inner {max-height: 90px; overflow: auto;}

The site is http://markpainting.gallagherbd.com/

Can someone let me know how I can tweek it?

Thanks!

[nabeel]

Hi @gallagherBD,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To make the logo overlap, you can try adding the following code as well:

@media screen and (min-width: 980px) {
  .x-navbar .x-navbar-inner {
    overflow: visible;
  }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

[gallagherBD]

Perfect! Thanks!

[friech]

We are delighted to assist you with this.

Cheers!