MartinMurray

Cool...
https://swan-oarfish-hpmr.squarespace.com/

On 4/13/2024 at 7:19 AM, tuanphan said:

Change this code

.header-nav-item--active a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

to this

.header-nav-item--active>a {
    background-image: linear-gradient(#5af5fa, #5af5fa) !important;
    padding-bottom: 5px !important;
}

 

@tuanphan This worked perfectly - Thanks Buddy 

12 hours ago, Beyondspace said:

What is your site URL?

Here is the URL - its stil in build... hopefully you can see it if Logged-in to your SS account.

Any ideas on how to get rid of the cyan background on these links in the dropdown?... I have some custom CSS for the active link (1px cyan underline)... but it's also influencing the links within the drop-down.

Hi guys, is there any way for the active NAV link? Underline to sit at the bottom of the NAV head?
Effectively, where are the red liners?

Its more of a Chrome issue? It happens to me in Figma editing online. It's fine in Firefox or Safari I've found.

I'm getting the same problem - the FAQs section is not moving down dynamically and overlapping in the section below it. It will fit if you widen the browser window, but who's going to do that 😄

URL: https://intropic-info.io/careers

On 5/26/2021 at 8:52 AM, ahsuhdude said:

I figured it out, thank you though!!! 

Can you share your fix please - It just makes for a healthier forum

The only way to have Nav dots is to buy a plug in. https://www.sqspthemes.com/plugins/gallery-dot-nav (for 7.0 pages)

On 6/25/2022 at 8:16 PM, laurenkilbane03 said:

 

Hey @tuanphan

I'm looking to do the same, but not for a product gallery page. I have a testimonial slider on my homepage (built from blog posts + a summary block). For now, I have arrows underneath, but I would like to have bullet points instead. I tried the code above, but no luck. Any advice? I'm working in 7.0.

Website is: https://bruisedgoods.com

PW: bruisernation  (website is locked)

The only way to have Nav dots is to buy a plug-in. https://www.sqspthemes.com/plugins/gallery-dot-nav (on 7.0)

Are you in 7.0 or 7.1 template

Thanks, I was just overthinking it a little, Your snip was missing '}}'...

This works great.

/* Mobile resize code block */
@media screen and (max-width:767px) {
div#block-62452260eb439022d3cd {
    width: 50%;
}
}

Thanks 

Sorry - Don't know! but adding <style></style> should do it? 

Hi All
I'd like to make a code block smaller when in Narrow view (Mobile) by about 60-50%... I've tried a few code snips like the below, with no luck! The code block is holding a scroll Lottie file I made.  Any help would be great. 

/* Mobile resize code block */
@media screen and (max-width:767px) {
div#block-62452260eb439022d3cd {
    width: 50%;
    margin: 0 auto;
}
}

The page is live and open  - https://intropic-info.io/pfi

Sort of found a fix - this CSS gave me the horizontal scroll bar, but only appears with scrolling. Ideally I'd like it to show, to indicate to the user it's there and explore.

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
 overflow-x: auto; 
}
}
.summary-carousel-pager {
  position: absolute;
  top: 10%;
  right: 15px;
  transform: translateY(-30%);
  width: 100% !important;
  z-index: 1;
}

14 hours ago, Wolfsilon said:

Hello,

You can add the horizontal scroll bar by removing the overflow property on the inner container and with the code that you already have on the Block-ID. Now you should see the horizontal scroll bar.

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
overflow: visible !important;
}
}

 

Thanks for the above -  I couldn’t get that to work (I've only got a bit of code knowledge) 
This seemed to work:

#block-yui_3_17_2_1_1635200644389_9550{
.sqs-gallery-design-carousel .sqs-gallery-container {
overflow-x: visible !important; 
}
}

But is it possible for the scrollbar to be visible from the outset
Also for the Header Text 'Land data at your fingertips' to stay fixed, rather than scrolling off.

Apologies if I've over worked this.
https://testlanding.squarespace.com

Site URL: https://testlanding.squarespace.com

Hi All
Need some help with some code for adding Horizontal scroll bar to a summary block (see Mocked-up image) I'm currently using 7.0 Brine and have already tweaked the code to style the Left and Right arrows... My client really  wants a Horizontal scroll bar as the carousel is quite long (29 images) and wants to show the user some sort of progression.

https://testlanding.squarespace.com The Summary block is right at the top 'Land data at your fingertips'
There seems to be a lot of unanswered questions around this topic any help would be massively appreciated.😇
 

Hi 
if you use a Code Block I've done it for a Volvo job where they wanted to block our FAQ
https://partnerships.autotrader.co.uk/care-by-volvo

<link rel=“canonical” href=“https://www.volvocars.com/uk/care-by-volvo/faq” />

This just tells spiders/robots where point of truth came from
to block you should use meta name in the Page Settings / Advanced  - PAGE HEADER CODE INJECTION - but this will block all SEO from the page and you may as well switch this off in the Squarespace settings: 
<meta name=“robots” content=“noindex, nofollow”>

 

This is a good fix 
https://blog.alexgittings.com/disable-parallax-on-one-squarespace-page/

While designing a website recently I needed to disable the parallax feature on one page. As I still wanted it to function on other pages.

To do this you will need to inject a script into the page.

Navigate to the page cog and select advanced and enter the following:

<script>
   Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-overlay-parallax-enabled"] = false;
 </script>

ALEX GITTINGS
30 NOV 2017 

1 hour ago, MartinMurray said:

This is brilliant 🙂 but when I add it into a banner header it seems to be forced black regardless of hex or colour you write in the code is there a fix for this? The template seems to force it to remain black?

For example - http://partnerships.autotrader.co.uk/hyundai-e-suv

Fixed 😄

On 5/25/2020 at 10:10 AM, tuanphan said:

Add Code Block with this code

<div class="mouse">  
  <div class="mouse-icon">
    <span class="mouse-wheel"></span>
  </div>
  
</div>
<style>
  .mouse {
  margin: 50px auto;
  width: 100px;
}

.mouse-icon {
   width: 25px;
   height: 45px;
   border: 2px solid white; /*you can change 'white' to a hex color*/
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}
.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white; /*you can change 'white' to a hex color*/
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}
</style>

 

This is brilliant 🙂 but when I add it into a banner header it seems to be forced black regardless of hex or colour you write in the code is there a fix for this? The template seems to force it to remain black?

For example - http://partnerships.autotrader.co.uk/hyundai-e-suv

On 3/3/2021 at 1:18 PM, tuanphan said:

It looks like you solved this?

I just used a Gallery block which the Client was happy with. 

Hi All 
I'm having some problems finding the right code for this as well - baffled me for a few days now.
I have a few hubs running, and having 2 column on images would really help reduce page hight on Mob 

https://www.autotraderdiscover.co.uk/ds7-crossback