kellijayne

Thank you! However, that just adjusts the arrow lower or higher, I tried that earlier. I need to adjust the nav links with the arrows to be 1 px higher than the nav items without the arrow.

nav.header-nav-list>div:last-child { position: relative; top: 2px; } I tried adjusting the (top: 2px) and nothing happens. I tried 3px, 5px, 10px and nothing

I'm having the same issue, your code above didn't help in this case. The Nav links with the arrow are about 1 pixel lower. It almost looks like its a slightly different font? Check it out... https://futures-explored.squarespace.com Password: FE2024 password is case sensitive

How do I Share a Product on multiple store pages using Categories? Please check out my Surplus store. (Still building this out) I will eventually have 6 Store Pages 1. Industrial/Commercial 2. Construction 3. Agriculture 4. Transportation 5. Equine Equipment 6. Material Handling Equipment I've set them up as separate stores, the ISSUE IS some stores will need to share some of the same inventory For Instance; Click on the Industrial dropdown as well as the Construction Dropdown Both contain "Generators". Seems like I could assign a category or tag to auto populate the Generator products in the other store pages. I added both a TAG and CATEGORY labeled "GENERATORS" to the generator product to test it and It didn't work! Unfortunately, I had to add the Generator product twice, 1 on the Industrial page and another on the Construction page. right now, I only have 1 generator listed, I will eventually have multiple generators so it seems the way SquareSpace is set up I would need to add the same products on each store page.. that's a lot of extra work! ------------ https://suziesurplus.squarespace.com/ PW: SuzieSuzie ----------- Thanks in advance for any help on this!!!! Maybe there is a plugin OR I'm just setting this up incorrectly??? Kelli

Has anyone figured this out??? I have the same issue

Did you ever get your site up and running with the multiple Stores? I am needing to create a site with the exact same functionality Kelli

Site URL: https://defendprogram.squarespace.com/ I know it's possible with CSS on 7.1 but not sure about 7.1 Fluid Engine... the CSS I'm finding isn't working The top banner image focal points are to the far left AND right (not in the center). If I could get it to display like it does on desktop my client would be incredibly happy SITE: https://defendprogram.squarespace.com/ PW: Defender Thank you in advance for any help with this Cheers, Kelli

It's not perfect but it's close! To see the latest update for this Add a new section to your page (blank") Add a background image then choose "EDIT SECTION" Click on "background" Scroll to "Image Effects" Click the thumbnail... second one down on the right Click on the "adjust" little icon on right below thumbnail Click PARALLAX - make sure angle is set to "90", you can also adjust the intensity PRESTO! we all now have Parallax!

tuanphan!!!!! You solved yet another issue. Seriously, I cant thank you enough! now if you just had a solution for parallax 😜

Hi Amanda, SquareSpace did an update, which they do often. Many of us designers add CSS or custom code to get a little more out of the generic templates... for me it's parallax and menu dropdown arrows to show a dropdown exists... those SHOULD be standard on this platform. Squarespace does NOT support custom code or CSS, so if you add it, you take the risk of this happening. I have 21 sites on 7.1 with this code integrated, about 75% of them still work and for some reason 25% don't, which I have to go back and adjust all the styling and add the standard background image animations, which are so lack luster but they are better than nothing

Site URL: https://shaferrealestate.squarespace.com/ How to add font awesome down arrow to dropdown menu / folder ? I was using CSS with a down carrot but suddenly yesterday it stopped working (yesterday, Squarespace did some sort of update that conflicted with my parallax code inject AND the down arrow) Here's the CSS I was using // Style Arrow Dropdown Menu .header-nav-item.header-nav-item--folder a.header-nav-folder-title:after { font-family: FontAwesome; content: "\f0ab"; padding-left: 4px; } Also I had this in the header <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> <style> I would like to use the circle down arrow <i class="fa-solid fa-circle-arrow-down"></i> Site I'm currently building out https://shaferrealestate.squarespace.com/ PW: Shafer

@tuanphan apparently it was the parallax code i've been using on several of my 7.1 sites (fluid engine as well). Its still working fine on "most" of my 7.1 sites, but this one it really effected including styling issues! Here's one of my sites where that same code is working perfectly www.LostIsle.com Here is the site I'm currently building out where suddenly yesterday it stopped working (I've since removed the code and am using the default background animations. NOT NEAR AS COOL AS PARALLAX!!!!!!!!!!!!!! https://shaferrealestate.squarespace.com PW: Shafer HERE IS THE CODE: (placed in footer) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <style>

I'm having the same problem!

I'm looking for the same, did you ever find one?

Hi @tuanphan thanks so much for chiming in. I removed the code and the icons appear, paste the code back and the icons disappear 😞 I wish I could figure this out. It's definitely the best parallax I have found for 7.1

Several of my clients have jumped to WIX because of this!!!! The so called NEW 7.1 "TILT" feature is not even close to a parallax feature. I have since found a code inject for Parallax but it has caused a few issues with social icons disappearing. I can only imagine how many SquareSpace designers have asked for them to implement Parallax. It's Ridiculous!

Site URL: https://bensfriendsofthevine.squarespace.com/ I've used this code an several sites and it works brilliantly! For some reason on this particular site, the social icons disappeared today, they were working fine yesterday! SITE: https://bensfriendsofthevine.squarespace.com/ PW: Ben Here is the code: (Settings/Advanced/code Injestion - placed in footer) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script> <script> $('.has-background:not(:has(.sqs-video-background))').each(function() { var findImage = $(this).find('.section-background img'); var imgUrl = findImage.data('src'); var dimensions = findImage.data('image-dimensions'); var imgWidth = dimensions.substr(0, dimensions.indexOf('x')); var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1); $(this).parallax({ imageSrc: imgUrl, naturalWidth: imgWidth, naturalHeight: imgHeight, speed: 0.5, }) }); document.getElementsByTagName("body")[0].onresize = function() { setTimeout(function() { jQuery(window).trigger('resize').trigger('scroll') }, 100) }; </script> <style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style> <style> THIS IS WHERE I FOUND THIS AWESOME CODE! Credit to: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1

Site URL: https://www.shaferrealestate.net FYI... If ANYONE is interested in doing this integration (paid obviously) hit me up, i'll hire you! I'm Rebuilding a site for my client. She is currently on WordPress and I'm rebuilding on SS 7.1 Her current site: www.shaferrealestate.net. In addition to the listings on the home page I would need to create this page as well Click here to see her Listing Page On her home page, you'll see the home listings towards the bottom of the page, this is what I'll need to add to her new site She is using BAREIS IDX. I assume I would need to embed the links provided from BARIES (example below) I cant seem to get it to show up on a test page (on my own site) EMBED LINK: https://rebareis.rapmls.com/scripts/mgrqispi.dll?APPNAME=ReBareis&PRGNAME=MLSLogin&ARGUMENT=8asoUeXWyR69g5w0nIrSLHWh8Zq4gC0p7mZGTOkt9Q8%3D&KeyRid=1&MLS_Origin=BARI This is also just a list view and doesn't have an option to display a grid view like on her website Here is the instructions the BAREIS provided to add the IDX feeds https://bareis.com/root-documents/forms/forms-1/idx-forms/2151-using-the-bareis-mls-idx-links-from-rapattoni/file.html Anyone have experience with this - OR- would like a small project integrating? Kelli kelli@kjdesignpro.com

Site URL: https://www.webuyuglyhouses.com I have a client in need of a 2 part / 2 page address validation form Check out sample sites of what I'm looking to do below Basically... the home page has a 1 field form (ENTER YOUR STREET ADDRESS) Upon submission, it takes you to a 2nd form (new page) with name, address, phone & email -> submit EXAMPLE SITES WITH THIS FEATURE: https://www.webuyuglyhouses.com/ https://www.brothersbuyhomes.com/ https://sundae.com/ I HAVE ALSO ATTACHED - Upon submission of the 1st page form - 2nd page form examples Anyone know of a plugin like this? Or a simple code inject? (I'm not a programmer, so looking for a simple solution). Client is willing to pay for plugin.

Has anyone figured out an answer to this besides Zapier??? My clients often complain!!!

THANK YOU SO MUCH tuanphan!!! Works perfectly!

Site URL: https://starlightstageshows.squarespace.com The only thing I found searching endlessly on google and this forum was to enable "show expert" and place a button there... but when I do that the entire event page shows on the Event list page! I just cant believe the 7.1 would get rid of such a crucial element! I was hoping for a CSS solution or code inject... please tell me it's possible 😳 https://starlightstageshows.squarespace.com PW: StarlightStage

Site URL: https://gutresolve.squarespace.com/ Brine template / 7.0 - I'm using CARD, OVERLAP & COLLAGE Image blocks. I'm having a STRANGE issue on mobile (phones only, tablet is fine) where it's removing the first letter of each title (see attached examples or view the site, link below) The site URL is: https://gutresolve.squarespace.com/ PW: GUT I did added custom CSS for the font sizing on mobile however, I tried removing the CSS and it didn't make a difference, the issue was still there Here's the CSS code I used ------------- p, h1, h2, h3 {hyphens: manual !important; -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; } @media screen and (max-width:990px) { .image-title-wrapper * { font-size: 36px !important; }} @media screen and (max-width:990px) { .image-subtitle-wrapper * { font-size: 22px !important; }} ------------- @tuanphan Do you have any ideas on this issue??? It's so strange! The attached shows the same section on mobile vs Desktop TITLE: MEET DANA TITTLE: OLDER PEOPLE

Here is the result i'm looking for... Ghost Plugin for "Summary blocks" https://ghostpluginssuper.squarespace.com/match-summary-block/?password=ghost I'd love to find "anything" similar for image blocks (stack, poster, card, overlap, etc) used in the example below Currently I've managed to get the "look" from using OVERLAP and placing a gray transparent overlay over the lower portion of the photo using photoshop (Total cheat)

Site URL: https://calcoastlegalservices.squarespace.com I'm using 7.0 Brine template URL: https://calcoastlegalservices.squarespace.com/ PW: calcoast Check out the example image example attached. The FORM has a white border, I would like to remove that border so it's just the blue background to the edge I tried adding to the .form-block (and other sections) but it doesn't work padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; Below is the CSS I used, its fantastic! ----------------------------------- .form-block { /* block background color */ background-color: #ffffff; /* text color */ color: #ffffff; } .form-wrapper input[type="submit"] { background-color: #08546c; } /*Styling the form fields*/ .form-block .field-element { background: #fff !important; border: none !important; border-bottom: 1px solid #08546c !important; } /*Styling field titles*/ .form-block .title { text-transform: uppercase; font-size: 20px; font-weight: normal; letter-spacing: .05em; } /*Styling the smaller titles*/ .form-block .caption-text { color: #fff; font-size: 15px; } /*Styling the radio button options*/ .form-block .option label { //font-style: italic; font-size: 20px; } /*Styling the form container*/ .form-wrapper { background: #08546c; padding: 40px; border-top: 1px solid #08546c; border-bottom: 1px solid #08546c; } -----------------------------------