Search the Community

Site URL: https://tarpon-lavender-jbyy.squarespace.com/ Password to the site is: TEMP I'm having problems making the header opacity appear semi-transparent. The options when editing the header are simply solid colour, or fully transparent. What I'm trying to achieve is a semi-transparent header, that has an opacity of 50%. The site is on the Eldridge template, so Squarespace 7.1

I have an image saved as a png. The image has a transparent background. I'd like to upload the image as the background on a section of my site (as an image with a transparent background). Whenever I try and add the image to the background, the transparency is lost and the used-to-be-transparent background turns black (the site section colour is blue). Reducing the overlay opacity doesn't help and increasing it creates a blue wash over the image as well. I could add a blue background to the image prior to uploading it except I'm trying to get a film grain effect on the image only, not the whole background. Hence the need for transparency. Anyone know how to get around this? Thanks

Site URL: https://brass-ranunculus-8yne.squarespace.com/ Hello good afternoon, can someone help me? I'm trying in several different ways to edit the css with the color: rgb(37 53 81 / 75%); Semi transparent but unsuccessful. grateful, sorry my english I'm using google translator. https://brass-ranunculus-8yne.squarespace.com/ Pass: 3626

Site URL: http://www.martiandesign.com I would like to have the background of my header transparent and then fade to black when I scroll on the homepage only. Any help is greatly appreciated (7.1)

Site URL: https://www.maggierey.com pw 2021 My client wants the header on homepage to blend into the collections section- rather than "cut off". She also wants the about page footer background photo of the colored dots to blend into the whole page. I was thinking to remove footer completely and just add as a section on each page but on the about page use 1 background image so it spans the full section and makeshift the footer in that section. Is there any other way to accomplish a transparent /blended footer on just one page? Thanks!

Site URL: https://fridleycustomhomes.squarespace.com/ I found some code to make my mobile header transparent, but now the header content is overlapping my other content on the page when scrolling. I would like to either 1) stick the transparent mobile header to the top of the site, or 2) show a header background color upon scrolling down the page - on mobile only. Can someone help? Website: fridleycustomhomes.squarespace.com Password: fridley Current CSS I'm using: /* Mobile header transparent */ @media screen and (max-width:640px) { body .Mobile-bar.Mobile-bar--top { background-color: transparent; position: fixed!important; } body.homepage { margin-top: 0 !important; } } /* Chane mobile hamburger icon */ button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "MENU"; font-family: futura-pt; color: #343234; font-size: 15px; letter-spacing: 0.1em; /* Change mobile hamburger icon color on index page */ } body.homepage button.Mobile-bar-menu:after { color: white; } /* TEST --- menu header fixed */ .navbar-fixed-top.scrolled { background-color: #fff !important; transition: background-color 200ms linear; }

Site URL: http://www.lauredemees.com/ Hello, I wanted to make the white boxes transparant, anyone knows how? I use the Marta-template :) I tried following code in custom css: #header { background: rgba(0,0,0,0.5); } Thankyouthankyouthankyou

Site URL: http://www.vimana.agency Hi, So, Squarespace allows you to use a transparent header with an image background / banner as the first section. It however does NOT allow you to have a transparent header with a carousel of images as the first section / banner (which makes no sense to me) I have to imagine this would be extremely easy for them to implement as its quite a popular design feature for many sights (e.g restaurants etc) Can someone please provide me with code or some solution to this? When I put a carousel of imagery for the first section, it automatically makes my header have a background even though it is specific as transparent. I've attached a screenshot, I simply want a transparent header, with a carousel as my first section. Thank you so much in advance!

Site URL: https://amal-testsite.squarespace.com Hi all In Squarespace 7.1, there is already build in options to choice both “fixed position” and “transparent” in EDIT SITE HEADER. BUT, it doesn’t work. When header is fixed, then transparency doesn’t work. Instead Is has default or choosen background color. so how do I set or code to get transparent header/navigation menu when it’s also fixed? test site: https://amal-testsite.squarespace.com password is: abcabc

Site URL: https://antelope-bluebird-89a2.squarespace.com/ Hi everyone, I'm looking to migrate my site from a 7.0 template to the 7.1 Clarkson Template. Here is my old website: http://www.originexpeditions.org Here is the one I'm working on: https://antelope-bluebird-89a2.squarespace.com/ Sitewide password: thanksforhelping I have spent about 8 hours searching the Squarespace forums, internet, and even trying to learn CSS myself to resolve an issue I have with the Header Navigation Bar. In short: I want the navigation bar and its dropdown menus to appear as they did on my old site. Features that I'm talking about include: Text being highlighted upon hover (I've gotten this to work) A semi-transparent dropdown menu for folders with a width that conforms to the text of the longest link + a few inches of padding (see my old site) The currently viewed page having shaded text in the navigation The menu options /links beneath each category being aligned left, formatted in congruence with the folder title above Additionally, if there is a way to add the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions) also, that would be great. If anyone has solutions to any or all of these requests I would greatly appreciate it. Thanks for your considerations, - Joe

Site URL: https://cinnamon-purple-cals.squarespace.com Hey! I would like to know how to make a fixed transparent footer with CSS so that the copyright sign and the contact button follow the user. Looked everywhere and no one seems to accomplish this task. Thanks a lot! Password: sodopizza

Site URL: https://www.bohannanphotography.com/ I am looking to make my navigation bar transparent on my website or at least on top of a gallery block. Here are some examples I found. If I could have some help, I would be very appreciative! http://www.laurenannephoto.com/ https://marinawilliamsphoto.com/

Site URL: https://www.thisvalleyglow.com/ password is: kustom Hello! I am working on a very simple website for my band with a new album on the way in a few days. I am using the Mojave template and have it set so that the mobile navigation is always present. I did so by setting the mobile breakpoint at 100%. The only thing I am trying to do now, (besides install a non-stock video!) is to make it so that the header is fully transparent in desktop, tablet, and mobile view. I am SURE this question has been answered before, but I am unable to find any info on it. Any help is appreciated!

Site URL: https://my-recruiting-assistant.squarespace.com/recent-commitments I am using Squarespace 7.1 and want to make the header on one page ONLY not transparent (https://my-recruiting-assistant.squarespace.com/recent-commitments is the page) THANKS!

Site URL: https://www.artschoolathletics.com/ Hi, I'm trying to figure out how to make my folder transparent. I know I need to use custom Css but I am not sure what to put in there. Any help is appreciated. I am using the Fairfield template. Thanks so much in advance!

I added a transparent .png image in the image section on the Collette template but it has a grey background. I can't find where to remove that Squarespace generated background. Does anyone have any tips on removing the grey box? Thank you!

I'm trying to get a transparent header on Almar (V. 7.1). I only need this on one page so that I can have a black header on all of the other pages and have my logo show through on a banner image on the main page. Any help would be appreciated.

Site URL: https://walkerton-physio.squarespace.com/ I've been using custom css on this site to create unique folder hover shape/colour and I can't seem to get the dropdown folders in the top nav to remain transparent all the time. It usually works when I have the css panel open, but it's not reliable and staying connected to my css all the time. Anyone know a fix? This is the code I've been using: body:not(.header--menu-open) .dark .header-nav-folder-content { background-color: rgba(0,0,0,0.0);} Site Password: Blvd-WP

Site URL: https://watermelon-recorder-nnyg.squarespace.com/ Working in 7.1 I am using a carousel banner and i want the header of the site to be transparent on the homepage so that the images in the banner sit underneath the header. https://watermelon-recorder-nnyg.squarespace.com/

Site URL: https://thunderfoxmusic.com Hi, I'm pretty new to Custom CSS and have been using it based off the advice found on forums. I'm trying to display a different fixed position background image for desktop and mobile for viewing optimisation. I've managed to get it working on desktop, and I got it working on mobile by placing a mobile-friendly background image behind the original background image, then coding for the foreground image to be transparent when viewed on mobile. It works fine in the mobile preview in the site builder, and it also works fine viewed on android phones. It doesn't, however, appear to work on iPhones which just display the desktop optimized image but zoomed in significantly. I've attached a screenshot of the view from an android (the one which fits the screen) and the view from an iPhone - below is the code that I'm using to achieve this (NOTE: I changed the 'max-width' paramater from 767 px to 950 px as I thought this might solve the issue but it hasn't. It also hasn't messed up the android view) [data-section-id="5e4e0b259625b1547470a01f"] .section-background { background-image: url("https://images.squarespace-cdn.com/content/v1/5e4ce6ee2218e34cd31829d3/86c35289-8a3c-49d4-9d77-82583188abdf/ke17ZwdGBToddI8pDm48kHsP6h8ITLpzppVA9b8GOgt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQnys2-58Jn-eukW1UFae4kMRF6JsQQSjrbz6STkd2Ul9Aa7pjcgczeZz4RiAJynZQ/standing+seamless.jpg"); background-size: cover; background-attachment: fixed; } @media only screen and (max-width:950px) { [data-section-id="5e4e0b259625b1547470a01f"] .section-background img { visibility: hidden; } [data-section-id="5e4e0b259625b1547470a01f"] .section-background { background-image: url(https://static1.squarespace.com/static/5e4ce6ee2218e34cd31829d3/t/60ca068e80d4337c06eb2e36/1623852694300/standing+seamless+3to5+vertical+smaller.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; } } Thank you!!

Site URL: https://gar-grouper-xgll.squarespace.com/config/pages Hi everyone, does anyone know how to add a faded/transparent background colour to a text block? I would like to add a faded black background to the text in a picture. I used this code - but nothing happens: #block-yui_3_17_2_1_1623600063113_8511 { background: #8C7B69; /* change this to your own colour code */ opacity: 0.7; /* this is the 'faded' effect. 0.5 is more faded, while 1.0 is no fading */ padding: 50px 200px; /* height x width ; adjust this accordingly to your text */ } Hope you can help me! 🙂

Site URL: https://www.studio-woodstock.com Hello, I am using the Hart template on squarespace 7.1 version. My ideal header is one that stays fixed and transparent as the user scrolls. As of right now, the header on the page is transparent and fixed at the very start of the page. As soon as one starts scrolling the header goes black. I have done some research in the forums and I found a topic similar to my question. The problem is the css that was provided in the forum does not work. CSS I pasted from the above mentioned forum post: .header#header {position: fixed!important;} .header-nav-folder-content { background: transparent!important; } and .tweak-fixed-header .header .header-announcement-bar-wrapper { background: transparent !important; } I tried pasting these separately and together within the separate css editor via the design link and within the pages link of each individual page. any help with this would be much appreciated. the webpage is: www.studio-woodstock.com password: skyler Thank you for your time, Skyler Smith

I'm trying to use image stacks with PNGs, but Squarespace is adding a faint color behind them. I tried testing all of the different image blocks and inline was the only one that didn't put a color behind the images (but it squished them). What is the issue here? Just a bug?

Site URL: https://www.ironboardecor.com Site URL: https://www.ironboardecor.com Hello, I am looking for help. How can I: make the footer transparent so the background image shows from top to bottom make the background image I have on my home page into a whole site background image while maintaining the color overlay and overlay transparency at %50 on the background image on whole site Thank you so much to whoever helps! pw: jengo -Pete

Site URL: https://kd-portfolio.squarespace.com/ Hey there! So i have a bunch of images on the site with transparent backgrounds and I've set my image blocks to all have transparent overlay - but there's still an overlay! https://www.loom.com/share/972f15c25ce346cbac06c7439deb78a9 Thoughts??