Adjust mobile logo size and padding

I've tried to adjust the logo in the mobile header using the "EDIT SITE HEADER" function but I'm still not able to make the logo larger and center it while still having the plus sign to expand the menu visible. If I make the logo too big, the menu disappears and I can't seem to get it center using any of the header layout options. Does anyone know if there is CSS I could use to adjust this?

Yes, there is code that could do this. Can you share your website URL?

HI @Ziggy the website is https://www.crystalhealingsound.com/

Try this Custom CSS:

@media only screen and (max-width: 768px) {
  .header .header-announcement-bar-wrapper {
    padding: 0vw;
  }
  div.header-title-logo a {
    margin-left:0;
    width: 95%;
  }
}

Hi @Ziggy

When I tried that code it cause the logo to distort (will attach before and afters). I tried adjusting the width and margins and it still looked funky. Is there anything else that might work? Thanks : ]

I'd also love it if it was possible to horizontally align the plus sign (for menu) with the logo @Ziggy

Try changing this code

<style>
            div.header-title-logo a {
                content: url("https://static1.squarespace.com/static/640228e22101f77a9914bb54/t/6429d218da69c36a33ada109/1680462361029/HORIZONTAL+LOGO+-+WHITE.png") !important;
                max-width: 1200px;
                /* if logo needs to be centered */
                margin-left: 75px;
                margin-right: 0px;
                padding-bottom: 20px;
            }
        </style>

to this

 <style>
            header#header img {
                content: url("https://static1.squarespace.com/static/640228e22101f77a9914bb54/t/6429d218da69c36a33ada109/1680462361029/HORIZONTAL+LOGO+-+WHITE.png") !important;
                /* if logo needs to be centered */
                padding-bottom: 20px;
            }
        </style>