scholarsayze Posted September 10, 2020 Posted September 10, 2020 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
tuanphan Posted September 10, 2020 Posted September 10, 2020 Can you share link to page in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
scholarsayze Posted September 10, 2020 Author Posted September 10, 2020 Thanks tuanphan, Yes the page screenshot as attached. The grey header bar I would like transparent. Many thanks, Best, Faiz
IXStudio Posted September 10, 2020 Posted September 10, 2020 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 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
scholarsayze Posted September 11, 2020 Author Posted September 11, 2020 Hey IXStudio, AWESOME fix I love it!! Looks real cool now much love!!! Best, Faiz
Jans Posted September 16, 2020 Posted September 16, 2020 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?
IXStudio Posted September 16, 2020 Posted September 16, 2020 Hi @Jans Please share your website URL to check it. Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD
scholarsayze Posted September 16, 2020 Author Posted September 16, 2020 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! Scholar & Sayze Google Chrome 2020 09 16 08 30 50.mp4
Recommended Posts
Archived
This topic is now archived and is closed to further replies.