Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by skali

  1. On this site we're using the Lightbox Anything plugin to create a contact form pop-up. If a good portion of the footer is visible on the screen and you click the contact link, the form tends to tuck behind the footer. Anyone know how I might be able to fix that? You can access the form on either the contact page or on the SBrand page "Get in Touch". site: https://sroka-design.squarespace.com pw: SD123
  2. Hello! I'm using a masonry style gallery sectionon this page (https://www.michaeldruker.com/properties). I've included the CSC code below that is implemented to style the captions & color change on hover. In addition to this we'd like to link out each image, but the links aren't activating. I'm thinking this code might be stacked on top of the click event or is disabling it for some reason. Or maybe it has to do with the initial opacity? Does anyone have thoughts on how I can bring the links forward so that they are clickable? The first image has a link applied for testing purposes (screenshot attached) Thank you in advance!! // *Caption Styling - Title* // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content { margin: 0; color: white; font-family: 'Goudy+Modern+MT+Std+Regular'; font-style: normal; letter-spacing: 0em; line-height: 1.1em; font-size: 2rem; text-align: center; }} // *Caption Styling - Second Line (Location)* // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] .gallery-masonry-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content strong { color: white; font-size: 1rem; font-family: 'Karla'; letter-spacing: .05em; font-weight: 400; display: block; text-transform: uppercase; line-height: 20px; margin-top: 8px; line-height: 0em !important; margin-bottom: 30px !important; }} //* PROPERTIES GALLERY GREYSCALE EFFECT * // @media @desktop { section[data-section-id="63eb213085c26b62e058f848"] { .gallery-masonry-item img { filter: grayscale(100%); transition: filter .2s ease-in-out; } .gallery-masonry-item:hover img { filter: none; transition: filter .2s ease-in-out; }}} //* PROPERTIES GALLERY CAPTIONS (DESKTOP) * // .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.25); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-masonry-item { position: relative; } .gallery-masonry-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-masonry { transition-delay: 3ms; }
  3. On this Portfolio page, the project titles that fall onto 2 lines seem to push the image up so it sits a bit smaller than the others that have 1 line titles. Anyone know how I might be able to fix this? https://lucas-studio.squarespace.com/projects PW: LSI123 Thanks!
  4. @tuanphanYes, please! The site is now live: https://www.kennerknechtdesigngroup.com/
  5. This site uses a custom hamburger menu, but on the home page it disappears into the background upon scroll because it's white and most of the backgrounds down the page are also white. Is there a way to have the word "Menu" change color to black up on scroll to that it appears continuously and doesn't get lost? https://kennerknecht-design.squarespace.com/ PW: KDG123 Thank you!
  6. Hi there! On the Portfolio page, I'm wondering if it's possible to add the same hover animation as the navigation/header underneath the "View Project" line of each project? This is the code I'm using for the hover navigation: // Stretchy Navigation Line .header-nav-item::after { content: ''; background: #FFFFFF; //color height: 1px; //thickness width: 0; display: block; margin-top: 1px !important; transition: width 1s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } And then this is the CSS for the 2nd line of the Portfolio title "View Project" (the URL is then changed per project. a.grid-item[href="/projects/manhattan-beach"] h3:after { content: "View Project"; } a.grid-item[href="/projects/manhattan-beach"] h3:after { content: "View Project"; } I'm running into the issue that the code is similar in that the content: element overrides one another when trying to apply both to achieve the effect. PW: LSI123!
  7. @tuanphan Here is the updated site info: https://paloma-contreras-design.squarespace.com/ PW: Sunshine201! Thanks in advance for your help!
  8. Site URL: https://kazoo-chipmunk-khcn.squarespace.com/ I'm looking to add a button to the primary header nav, but it's also appearing below in the folder dropdown menus. Could anyone help me isolate the button to only appear in the main nav and not in any dropdown folders? This is the 7.0 template, Five, and I'm using the following code: nav#main-navigation ul li:last-child a { background: #000000; color: #ffffff !important; padding: 10px 20px !important; border-radius: 30px; border: 2px solid #ffd966; } https://kazoo-chipmunk-khcn.squarespace.com/ PW: Sunshine012! Thank you!
  9. Site URL: https://terrier-hexagon-22dr.squarespace.com/ Hello! I'm using a font for a website that seems to default to using the special/ligature marks. Is there a code that would fix this within Squarespace or is this more of a font file issue? Assuming it might be the latter, but would love any insight if someone has encountered this before on a site. https://terrier-hexagon-22dr.squarespace.com/ PW: Sunshine201! Thanks!
  10. Is there a quick & easy way to make the header transparent on a single page? Thanks!!
  11. @tuanphan I've added it back in! It's in the menu - currently it's pulling in a logo (1st Dibs) we've uploaded, but as you can see it's cut off.
  12. Hi! I have three social links I'd like to include in the footer of the site and one is an external shop link. Can anyone help me customize the generic link icon to show my own image/icon? Also, is there a way to customize the size of that image once it's placed? I'm thinking it might be a bit wider than the link image looks to be now.
  13. @tuanphan Thank you! For #2 (disabling the hover), I'm looking to have the third project image (Coming Soon: Kenilworth, IL) remain as-is. https://www.arielokin.com/test-page-reverse-hover So, having it stay the blue background with white border with the caption text in the middle. Right now the hover makes it disappear.
  14. @tuanphan Thanks! This gets me close, but the caption seems to be transitioning at a different speed than the background image. Do you have any thoughts on how they could both move at the same speed? Also, is there a way I can target certain projects to disable the hover completely? Thanks!!
  15. @tuanphan this is perfect! Is there a way to integrate a slower transition?
  16. @bangank36 I currently have a portfolio in Grid Overlay set up and want each image in that portfolio to hover with an image unique to that project instead of having the overlay apply to all the images. Not sure if this is possible with the portfolio or if I could achieve this differently? Hopefully that makes sense. Thank you!
  17. Site URL: https://www.arielokin.com/test-page-reverse-hover Hi! I'm trying to build out a project landing page using the portfolio (Grid Overlay) and want to customize each project's hover with a unique image. I know how to overlay an image, but not a photo that is unique to each product since there are no block IDs associated to each project. Is it possible to do so? For additional context, it would essentially be reversing this image and hover set up minus a few decorative details. Thank you!
  18. I'm wondering if there is any way to create a fixed side navigation menu that is somewhat similar to the one on http://amberinteriordesign.com/ in 7.1? Thanks!
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.