Search the Community

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://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!

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

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.

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://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??

Site URL: https://vuvuzela-lilac-s52g.squarespace.com/config/design/custom-css I'm really eager to create a transparent navigation bar for mobil view. The navigation bar is transparent on website view, but I can't figure out how to create the same look for mobile view. I've been looking through multiple previous and similar posts in here, but nothing have been working for me so far. Can anybody help me with a CSS code in order to create a transparent navigation bar for mobile view, so it matches the navigation bar on website view? website url: https://vuvuzela-lilac-s52g.squarespace.com/config/design/custom-css Kindest,

Site URL: http://ferret-vibraphone-l7b8.squarespace.com Hello I would like to make three modifications to my page (ferret-vibraphone-l7b8.squarespace.com) in the hero image area. 1) The hero image currently is extended vertically by inserting spacer blocks over it rather than directing it to fill 100% of the vertical area on screen load, and it also oddly doesn't quite go to the edges horizontally. I'd like to resolve these issues in code. 2) I'd love to be able to add a small photo credit for the main image. Ideally this happens immediately beneath the image but could happen over the image in the lower right corner. Doing it as a text block at the top of the section beneath the hero image places it too far away, it really would need to be snug up against the image so it seems like it needs to be a modification to the hero image section. 3) Biggest issue, I would like to make the nav bar transparent but fade in opaque when it's being rolled over. This site gives a good example (https://www.tracksmith.com) although theirs is also sticky and does the slick condensing thing none of which I need. I'd simply like to be able to read the nav links over the hero image without the opaque white bar at the top, and then when rolling over the nav area, that bar fades in.

Site URL: https://www.abohemiaandthewolves.com/ Does anyone know how to make this transparent when you hover over the categories in the menu bar? I already switched the toggle to transparent so the menu is transparent, but for some reason when I hover over "Shop" there is still a big white box that I can't get rid of. I just want this to be transparent w/ the words from the drop down showing. Anyone know the steps and css code to inject for this? The picture is added so you can see what my problem is. Thanks everyone!

Site URL: https://kangaroo-polygon-sn6z.squarespace.com/config Hello, I'm trying to do some customization to my pagination. I'd ideally like it to be transparent instead of the automated white block that gets dropped behind it. Additionally, I'd like the right side of the pagination to be white text instead of black text. Lastly, I'd love for the pagination text to scale down for mobile. If anyone can help with this, I'd appreciate it! Thanks!

Site URL: https://arsene.studio/en/home-1 Hi, If I put a first section that do not have a background image/video, the header stays above. Ho can I force it to be on top of the first section? Thank you ! Leo

Site URL: https://www.crownvideos.co.uk/ Hello, My header used to be transparent but today I tried to change it and it has become solid white without touching anything. How can I revert this to be transparent again when it is at the top? My header layout elements are all set to bottom. Colour changes when changing the site styles >main>color section but I cannot get it to be transparent at the top. When padding added to the header the logo and menu slide down from the white banner. Also when parallax option is unticked the white rectangle disappears from on top of the header menu but the elements are still on top of black andI would like to have the parallax effect like it had it before anyway. I have used the following code which hasn't worked: body.tweak-transparent-header:not (.header--menu-open):not([data-menu-overlay-theme-switcher="true"]) .header-announcement-bar-wrapper.dark { background-color: transparent !important; } header.Header.Header--bottom.Header--overlay { background-color: transparent !important; } HELP! Thanks, Claudia

Site URL: https://www.noiristhenewnoir.com/contact Hello, I'm trying to find out how to make the drop down menu on my navigation transparent or translucent rather than a black box. Can anyone other any assistance?

Site URL: https://www.newrootsmeals.com I have an image with a transparent background that I want to post on my website but every time I upload it the background comes out grey? I tried uploading one with a white background and it still came out grey. How can I fix this?

Site URL: https://www.stigmastudios.net/ Website: https://www.stigmastudios.net/ Password: deadrose Hi there, I've set up my site to be only one page and in each section the header has got a black slightly-transparent background. But when it's at the top of the homepage, the background disappears completely. Is there a way to make it so that when you're scrolling it has the background, but clicking through each section, it goes away?