Search the Community
Showing results for tags 'transparency'.
-
Transparent Header on Front Page only (7.1)
CaptainMaze posted a question in Coding and Customization
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://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: 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!
-
Site URL: https://plasticarcade.com Hello Here is my site and pass https://plasticarcade.com @PLA2022 So I have a floating section over my top section and I made the section background transparent but now there is a white background there. My whole point to this is I want to to have a floating section with my site title floating overtop a gallery slideshow for top banner auto cycling though image I want this to be transparent with a slight color where you can see the gallery behind the section background. This is what I have... And this is what I want... I'm using a gallery slideshow because it animates on its own and I don't have code injection to add animation to banner slideshow. Separate thing to the background thing Another issue I'm also having some weird white color shifting effect on my menu at the top, I know its because of the social icons because when I remove them it has no problem
-
Site URL: https://steven.squarespace.com Menu items get cut off when scrolling inside nav on desktop. Is there a way to make them NOT get cut off? Screen Recording 2021-12-19 at 11.07.03.mov -
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?
-
Is there a quick & easy way to make the header transparent on a single page? Thanks!!
-
Site URL: https://wolverine-ocelot-sszh.squarespace.com I've been trying to find a way to make my logo and navigation transparent and sit over the top of my carousel header. Would anyone be able to help with this please? I'm using Squarespace 7.1 I also have another question. Is there a way to make the carousel on my website play automatically? Thank you so much 🙂 -
How to make drop down menu folder transparent
lion_the_el posted a question in Coding and Customization
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? -
Add a transparent gradient overlay to individual sections?
skabir91 posted a question in Coding and Customization
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 linear-gradient() instruction. However, the above code doesn't seem to work. I should add that I am also using javascript to create a parallax effect, which I am hoping isn't conflicting. Can anyone walk me through adding an additional element behind my text/image blocks and above my background to which I can add a gradient that shifts from white-to-transparent-to-white? Alternatively, can anyone show me how to make an image block flush with with the top of a section (so I can just stick a small PNG at the top and bottom of my sections and call it good)? -
I have a white logo with a transparent background that looks great on my site since there is an image behind it. However, when I send the website link in text or post it on Facebook, you can't see the logo because it is white with a transparent background. Any ideas on how to fix this without changing the logo on my website? Any idea what is used when a logo/image is included in a link? My site is not published yet. Thanks for the help! -
Site URL: https://llama-jellyfish-92m5.squarespace.com/ My header elements are set to the Bottom positions recommended by @Paul2009. I've researched many posts about this but can't seem to craft the desired effect. I've used a bit of copied CSS code (for other tweaks), so probably that area should be checked for potential conflicts. —Thanks, Suzanne pwd: inwardcompass
-
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
-
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://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 function of setting the navigation to Transparent) I want the text and logo to change to pink. It's a bit tough to put in words so hopefully the images and link help to covey the request. And this change would have to be able to be applied to the drop-downs from foldered nav items, because this looks awful...- 5 replies
-
- 1
-
-
- navigation
- color
- (and 1 more)
-
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
-
Site URL: https://www.letsbonfire.com/ This is what I want the menu to look like - or as close to it as possible. I've tried a variety of codes for the transparency and rounded edges and nothing seems to affect it. -
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
-
Transparent homepage header to solid color on scroll?
deplatt posted a question in Coding and Customization
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! -
Fixed AND transparent header/menu. How?? (SS 7.1)
peterbjerg posted a question in Coding and Customization
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 -
Customizing the width of dropdown menus with Clarkson
Jnap posted a question in Coding and Customization
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
