tuanphan

January 30

Yes. If you want to change Header Background Color on One Page, you can use this code to Page Header Code Injection. If your site doesn't support Code Injection, you can edit page > Use a Code Block

<style>
  header#header {
  	background-color: #f1f !important;
  }
</style>

January 30

8 hours ago, potenzanana said:

@tuanphan
The website is: https://hammerstone.squarespace.com/
PW is: hammerstone

You'll see SHOP in the nav bar is slightly higher than the rest. When I adjust the number 2, that moves the dropdown arrows, but not "Shop".

Thank you

Use this CSS code

nav.header-nav-list {
    align-items: center;
}
nav.header-nav-list>div:last-child {
    position: relative;
    top: 1px;
}

webbroi · January 30

You try using this extension (trial plan is enough)

https://www.squarewebsites.org/squarespacewebsites-tools-extension-pro

January 30

If your site is one page only, you can use this #contact (remove / in the url)

But if your site has >1 page, when you are on another page, click this anchor link, it will do nothing

January 30

23 hours ago, SophieCartwright said:

Hi @tuanphan & @rwp

I am having a similar problem - I need the logo and navigation to appear white, then move back to black once I start scrolling. Can you please help?

Website: https://gold-eagle-j8bb.squarespace.com/

Password:Littlefoodmarket

You can use this CSS code

header#header div.header-nav-item>a {
    color: white;
}
header#header.shrink div.header-nav-item>a {
    color: black !important;
}
header#header.shrink img {
    filter: invert(0);
    -webkit-filter: invert(0);
}

How about mega menu is open? Change color or keep current color?

8 hours ago, ianmcnairy said:

Thanks for the explanation! It works but inverts the color exactly opposite from the auto change. I thought I could bypass by changing the base logo color to white but then on the project pages is disappears in the white background. Any thoughts?

Can you share link to project page? and list page or detail page?

8 hours ago, er0ck05 said:

I am having the same issue, can someone help me?

Can you share link to page where you have problem?

January 30

On 1/28/2024 at 9:35 PM, leonprantner said:

Hi tuanphan, I wanted the two lines to be closer together, putting them both in one text box sets a fixed distance between them. Maybe it's possible to adjust the gap in CSS, I just used two blocks for now.

You can use 1 Text Block with this CSS code to adjust gap between 2 Heading 4

body#collection-65ae87060e949c0ab050dd84 h4 {
	margin-bottom: 40px !important;
}

January 30

Change your code to this code

<style>
/* hide items on desktop */
nav.header-nav-list>div:nth-child(-n+7) {
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+7) {
    display: none;
}
</style>

January 30

On 1/28/2024 at 12:20 PM, rhartegan said:

Hi. So this is on topic with a question I have about adding in multiple drop downs under the navigation bar as per below. I guess this is also an issue Squarespace users have and from what I've read a custom CSS code may be needed. I'm no developer so I'm not super savvy with this stuff but I've gotten by the last 7 years. My question is, is there any kind of plug-in or extension to do this or is this a custom CSS thing?

Example below for what I'm lookin for. Any help is appreciated.

Rock (displayed in navigation bar)

-Private Guiding (Subpage 1)

-Southern California (Subpage 1.2)

-Red Rock (Subpage 1.3)

-Eastern Sierra (Subpage 1.4)

-Alabama Hills (Subpage 1.5)

-Technical Rock Courses (Subpage 2)

-Intro to Outdoor Rock Climbing (Subpage 2.1)

-Intro to Multi Pitch Climbing (Subpage 2.2)

-Trad Clinbing 101 (Subpage 2.3)

Multi level dropdowns like this? (this site is Squarespace site)

January 30

27 minutes ago, JessicaWare said:

@tuanphan Do you know if it's possible on my homepage only, to have the header menu appear after you start scrolling but have it transparent? At the moment if I unselect 'fixed position' in the settings, the header then appears when scrolling but it has a white background. Any help much appreciated!

You can use this CSS code

body.homepage header#header.shrink {
    background-color: transparent !important;
}

January 29

Hi,

It loads fine on my Windows/Chrome

January 28

What is site url? We can check problem easier

January 28

On 1/27/2024 at 1:09 AM, prustique said:

Hello,

I'd also like to have my hero image under the header, but none of these CSS code work for me. Does anyone know how to do it?

www.rustique.uk

Thanks!

You can use this code to Website > Website Tools (under Not Linked) > Custom CSS

[data-section-id="65ad2385dce3ff410f43c2e1"] {
    padding-top: 0px !important;
}
body.homepage header#header {
    background-color: transparent !important;
}

January 28

How many items per row? For desktop/mobile

January 28

You can use this CSS code

.is-embedded .step-pane {
    background-color: black !important;
    color: white;
}

January 28

On 1/24/2024 at 5:21 PM, Davidasmith1986 said:

Hi @tuanphan,

You seem to be the go-to guy for help with this.

I'd love to be able to do the same with the carousel on this site (bottom):

https://www.rarecontent.co/studio

Much thanks for your time in advance!

Use this code to Website > Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>
<style>
.user-items-list-item-container[data-section-id="659d66725c98073d48d2f8c6"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="659d66725c98073d48d2f8c6"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

On 1/26/2024 at 10:14 PM, estudiohelios said:

This doesn't seem to work for us...

Here's the page: https://www.estudiohelios.com.co

Appreciate the help in advance! Thank you.

With your site, use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $( ( ) => {
  
    const selector = '.user-items-list-carousel__slides .list-item';
    
    $( selector ).each ( function ( ) {
    
      const $this = $( this );
      
      $( $this ).click ( function ( ) {
      
      const url = $( '.list-item-content__button', $this )
      
        .attr ( 'href' );
        
      $( `<a href="${ url }" target="_blank">` )
      
      	.get ( 0 )
        
        .click ( );
        
      } );
      
    } );
    
  } );
</script>
<style>
.user-items-list-item-container[data-section-id="65a6bd7a7194bd427148dcc9"] .user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-item-container[data-section-id="65a6bd7a7194bd427148dcc9"] .user-items-list-carousel__gutter {
    cursor: pointer;
}
</style>

January 28

On 1/25/2024 at 10:22 PM, tuku said:

Cool, thanks @tuanphan.

I've now added the banner to the Footer: https://echidna-mandolin-33c8.squarespace.com/shop/singles

Password: hello

I look forward to receiving the code for this. Much appreciated!

Move this?

under header + above this?

January 28

On 1/26/2024 at 8:05 PM, jacobtdb said:

Hi, i have the same question. We have a video (from Vimeo) on top of this site: https://www.drenday.com/ - and it is very slow to load so i want a pre-loader video if this is possible?

I think you can consider adding a loading effect cover whole page, something like this example:

https://tuanphan3.squarespace.com/page-animation-1?noredirect

pass: abc

Set a time long enough, so that when it disappears, the video will finish loading

January 28

#1. Add this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
body.homepage article section:first-child {
    padding-top: 100px !important;
}
}

#2. Mobile content, you mean logo + burger icon?

January 28

On 1/26/2024 at 11:03 PM, Civic said:
Hello @tuanphan this is not working to me, still can see the flash when the images change. 😞
<style>
  li img, li:hover img {
  	transition: all 0.3s ease;
  }
</style>

Can you share link to page where you see problem on your site? I will check again

January 28

Both need to be same, you can remove .ttf from first arrow code

January 28

You can enable Lightbox, then we can use CSS code to replace image in lightbox with new image

January 28

On 1/26/2024 at 4:00 PM, SodaCreekDigital said:

I have another post in this forum asking for help on this same thing, I've done what you suggested @tuanphan and used a list. The image/text view as we'd like, then then as soon as you scroll you can only scroll one at a time which means that the images and text don't stay together. I'd like the "click on arrow" to move two blocks at a time, not just one. There will be many images in this list with text for each.

Site URL is: https://crocodile-begonia-pwxa.squarespace.com/, password is Sodacreekdigital and the page is the home, called abstracts.

Here is my other post. Any help would be appreciated.

Like this example?

https://tuanphan.squarespace.com/text-left-iamge-right-1?noredirect

pass: abc

Here I used code to move image to right, text to left.

January 28

Try this code to Website > Website Tools (under Not Linked) > Code Injection > Header

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#000">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#000">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#000">

January 28

Which page are you referring to? I don't see it on homepage

https://green-aardvark-exdh.squarespace.com/

January 28

Access Website > Website Tools > Hover on "Home page" in Main Navigation or Not Linked> Click Gear icon > Advanced > Look at right box, if you see the code, try remove it.

Forums

Gallery

Blogs

Events

Store

Downloads

Profiles

Posts posted by tuanphan

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources