Header logo background showing through a transparent logo


I have a few questions, but for ease of people finding answers later I’ll post them separately.

I am building a site that has a logo with a transparent background. It looks ok in “Preview” mode, but when outside of the customiser it has a block white background and the position is out. Please see the image below for how it looks live.

This is how it looks on the website live.

The website address is www.aptareconsulting.com

Thanks in advance for your help!

Best regards,



This is how I would like it to look (and how it looks in the preview/customise edit option)


Please try to add this CSS code to Customize > additional CSS:

@media (min-width:768px){
 .site-branding {
    background: transparent;
    border: none;


1 Like

Hi Awan,

Thanks for the fast response! This code fixed the background problem, but the logo block is still out alignment. It seems as if the top of the logo is aligned to the half way mark of the menu bar?

I have also just checked the mobile site and it doesn’t appear to have worked for that, is there additional code for mobile responsiveness?


Sorry for late reply.
Here is the code to upward the logo:

@media (min-width:  768px){
.custom-logo-link {
    margin-top: -35px;
1 Like