Header difference between desktop and mobile


For my paka2017.com site that I’m currently working on, there’s a difference for the header between the mobile and desktop version. For the desktop, the white logo shows up nicely in the upper left (contrasting the grey background). For the mobile, it creates a complete banner with a white background. I’d like to dispose of that banner if possible and have it similarly in the upper left corner on the image’s background if possible. Thanks so much



You can have the logo with transparent background on mobiles too with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header, .site-header.has-header {
    position: absolute !important;
    background-color: transparent !important;

That was made for a purpose, since the header will be smaller on mobiles, so the logo / menu may not fit perfectly inside the header, but you’ll see after applying the above Custom CSS if there will be issues.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,