Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'transparency'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi, I want to add transparency to header of my website. Currently my logo is not clearly visible, if i add some transparency it will be visible. i have attached a photo of my issue for reference. Please help any way of doing this. thanks.
  2. Site URL: https://moose-hawk-zh87.squarespace.com Dear all, I'd like to change the transparency of the dropdown menu in mobile version to white? The text can't be read now because of the transparency, so it looks awfull. Thank you all very much!
  3. Hi everybody :-) And Merry Christmas! I am making a webpage. The frontpage (home) is a full image with two sections below. When the visitor enter the page, I wish the font and social media icons in the header on the image to be white, yet when they scroll down I want the header (fixed) has a yellow base and black font. Does any one know how to do this? Make the font change colour depending on background? At first it did it by it self, but now I can't figure it out. I hope someone might be able to help out :-) All the best Tyra
  4. 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?
  5. Site URL: https://coconut-triceratops-wpkr.squarespace.com/ Hi there, Can someone please help me make the header transparent only on the homepage and a solid color throughout the rest of the site. Thanks in advance! Best, Erik
  6. 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!
  7. Site URL: https://shuvamkabir.net I'm attempting to add a white gradient above my background images. My first thought is to add an additional element that serves as an intermediate layer. I've tried the following, which I copied from here : [data-section-id="xxxxxxxxxxxxxxx"]{ .section-background::after{ content:""; display:block; position:relative; width:100%; height:100%; /* in hsla color format (below), the last number is between 0 and 1 and changes the opacity */ background-color:hsla(100,20,50,.5) !important; } } And then replace the background-color() with a
  8. Site URL: http://uppercutdanseteater.squarespace.com Hi! I would like to have a burger menu on the right side corner of my website, but when clicking on it, it hides the background as if I'm entering a new site. And I would like it to look like this: (transparent when you click on the burger so that you still se the background as well as to be able to use the folders) I am currently using this code: @media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu
  9. Site URL: https://brunch.co.kr/@greeda/39 Hi, How to hide background image by scrolling page: html, css, js? See https://brunch.co.kr/@greeda/39 to understand the question.
  10. Site URL: https://www.ballihoo.co.za/home Okay, this is a pretty specific question but the use case is actually quite common from a design perspective. To explain: I have a white BG navigation with pink logo (PNG) and text/links. It also uses the Transparent option under Edit Site Header > Colors. This is of course throughout the site and works great for the most part, but... On the homepage only, I want to have the navigation start as white text on transparent (as it sits on top of a darkish full bleed hero image) and then once the BG of the navigation fades in (a built in func
  11. 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!
  12. Site URL: https://seabass-maroon-5h8g.squarespace.com/ https://seabass-maroon-5h8g.squarespace.com/ Password: oakpointtest On my current website, I like how my header is transparent at first, and becomes a solid grey when scrolling down. This works for most pages. But on my portfolio "blogs", since the header takes the background color of the first section, the header becomes white. The navigation links and logo don't work with white backgrounds. I would rather for these pages the header is set to dark grey. Example: https://seabass-maroon-5h8g.squarespace.com/config/?frameUrl=%2Foa
  13. Site URL: https://elk-flamingo-2j9s.squarespace.com/config/help Hi everyone My landing page image is to bright and I would like to have the header slightly more opaque so it gets easier to read the menu. Could you please let me know how I can do this and making sure I just change the opacity on this specific page? Thank you
  14. 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
  15. Site URL: https://www.justinpape.com/ Hey, Ive just noticed that my header when scrolling no longer stays transparent. On the main page it turns to a white BG and on a project page it turns Black. I have read a few different treads and tried the different custom codes i have seen but nothing seems to let it stay transparent all the time as it used to. Anyone have this issue and figure it out? Site: https://www.justinpape.com/
  16. Site URL: https://corn-apricot-zn88.squarespace.com/ Hi. I coded my site so that the full bleed images slip under the header and a static text that sits on top of the image. It works perfectly, but in mobile view, I cannot get them to now move back down and I cannot see the text. I am not an expert at mobile coding, so I am hoping that maybe I am just missing something. This is the code for the text overlay and shifting the content up. <style> .gallery-fullscreen-slideshow { margin-top: -205px!important; margin-bottom: 0px!important; padding-bottom: 0px!important;
  17. Site URL: https://smilodon-tulip-mbea.squarespace.com/synopsis-1 Hi, I have background image I would like to run through the footer, however the footer appears as an opaque color. How can I make the footer transparent. I tried inserting this code into the pages advanced settings, but no cannoli. <head footer#footer { display: none; } } </head> And also the header toggles between opaque and transparent, I would like to make it exclusively transparent. Any and all replies much appreciated. thx
  18. Site URL: http://www.georgiahicks.com Hi, The code for my website is working fine in editor, however when it's live the transparency doesn't work. May I ask for your advice with this? The password to access the site is "portfolio123". Thank you.
  19. Hi All- My images contain transparent backgrounds and I'd like for the background to actually remain transparent on the site. I took a quick screen shot below. The gray area of the image shouldn't be there. It is actually a transparent background. Any way to persist the transparency of the actual image to the image card? Happy to throw some css in there, but not exactly sure what to do. Thanks, Greg
  20. Site URL: https://www.momentephoto.com Hi, I have some troubles with header of my website. I would like to set transparent header because on page with my work (called Naše práce) there is a photo begining on the very top of the page. On this site everything looks fine but the problem shows when I go to the homepage, where is photo set as inset so it has white edges like background of the page and there the transparent header doesn´t work. On the homepage I need the text of the header to be black but it´s light gray (it was even white before but I probably changed it somehow and don´t know
  21. Site URL: http://clever.cooking I'm wondering how I can make my header non-transparent on all but my main page? I have a graphic on the main page so transparency is perfect there, but I'd like the head to be a non-transparent solid color on the other pages. Any help would be hugely appreciated!
  22. Site URL: https://seal-bagpipe-jk7x.squarespace.com/ I am trying to turn the content block in my collage images transparent. I've managed to achieve this when the Custom CSS tab is open. But when I view my site with another tab open it goes away. Then if I open the Custom CSS tab it works again. Here's the code I'm using: Here's what it looks like when the CSS tab is open: Here's what it looks like when the CSS tab is closed: Any suggestions? Website - https://seal-bagpipe-jk7x.squarespace.com/ Password - Schr0dinger1
  23. Hi there, I've used the code below to set up a transparent mobile header for my site which uses the Brine template. The mobile nav header now sits nicely over each index page banner image: @media only screen and (max-width: 640px) { .Mobile-bar--top { background: hsla(0,0,0,0) !important; position: relative; z-index: 1 !important; } .Index-page--has-image:first-of-type { margin-top: -100px !important; position: relative; z-index: 0 !important; } .sqs-block-content:first-of-type { margin-top: 50px !important; position: relative; z-index: 0 !important;
  24. Site URL: https://www.cofats.com/contact I created an image with a transparent background, and for some odd reason, I can see the edges of the transparency when I drop it on my "Contact" page. I do have another image taking up the background of the whole page, but I'm not sure why that would affect this smaller image on top. Any help would be wonderful. Thank you.
  25. Site URL: https://www.zealoustravelco.com UPDATE ---> SOLVED Hi! Can anyone help me with my transparent header (w/ blur effect) that suddenly stopped working? Here is the CSS that worked until I randomly checked website today: /*FROSTED GLASS NAVIGATION BAR*/ body:not(.tweak-transparent-header) .dark .header-announcement-bar-wrapper { background-color: rgba(0,0,0,.2)!important; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); padding-top: 8px; padding-bottom: 6px; transition: background-color .15s ease;
  • Create New...