How can I make my Site Header background transparent?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/config/

Hello,

I want to make the background of my Header transparent so that it looks like my logo is 'floating' above all of the page content as attached. Is this possible?

My site page is here: https://bluebird-porcupine-yzdg.squarespace.com/config/

Pword = squarespace

Many thanks,

Best,

Faiz

Can you share link to page in screenshot?

Thanks tuanphan,

Yes the page screenshot as attached. The grey header bar I would like transparent.

Many thanks,

Best,

Faiz

Hi

Use this code in Design -> Custom CSS

body.tweak-transparent-header:not(.header--menu-open):not([data-menu-overlay-theme-switcher="true"]) .header-announcement-bar-wrapper.dark {
    background-color: transparent !important;
}

Please use the like button if it helps you!

Best,
Leopold

Hey IXStudio, AWESOME fix I love it!! Looks real cool now much love!!!

Best,

Faiz

Hey @IXStudio, I've just got the same question, I've pasted the css you've given under Design > Custom CSS but it still isnt showing as transparent, am I doing something wrong? Would you be able to assist me with this?

Hi @Jans
Please share your website URL to check it.

Please use the like button if it helps you!

Best,
Leopold

Hey Jans, I had the same issue but I believe you need to check that the section immediately below your header, under settings and 'color', that it is set to 'dark'. Do check the attached video.

If the section below your header is set to 'white', you can either change the code part to 'announcement-bar-wrapper.white'

Or simply switch from color settings to white.

Video also here: 

Hope that helps!