Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation color change 7.1


NoaDK

Question

Site URL: https://ray-quillfish-7z39.squarespace.com/config/settings

Hello

I have two questions, i already searched a lot for solutions but everything i found did not work for me.

 

1) I would like mij navigation (logo, tekst, button, line) to change color when scrolling past the hero image. But only on the homepage.

2) I would like the color changes on other pages.

This is my site: 

https://ray-quillfish-7z39.squarespace.com/config/settings

The password is graphicdesign

I hope someone can help me, i've been searching for soo long now.

 

Thanks in advance! 

Link to comment

9 answers to this question

Recommended Posts

  • 0
On 1/22/2022 at 7:41 PM, NoaDK said:

woow thank you!

it's almost working!

the only problem is that i can't make my logo change...

 

Schermafbeelding 2022-01-22 om 13.39.00.png

Change to black, white color or another logo? If another logo, use this new code

<style>
  body header#header.shrink a {
    color: #f1f !important;
}
  header#header.shrink img {
    content: url(https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008__480.jpg);
}
</style>

Replace pixabay with new logo image url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
12 hours ago, NoaDK said:

Site URL: https://ray-quillfish-7z39.squarespace.com/config/settings

Hello

I have two questions, i already searched a lot for solutions but everything i found did not work for me.

 

1) I would like mij navigation (logo, tekst, button, line) to change color when scrolling past the hero image. But only on the homepage.

2) I would like the color changes on other pages.

This is my site: 

https://ray-quillfish-7z39.squarespace.com/config/settings

The password is graphicdesign

I hope someone can help me, i've been searching for soo long now.

 

Thanks in advance! 

What do you think about when you scroll down, header will change background with some transparent color?

 Does it make sense?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
16 hours ago, NoaDK said:

Yeah, maybe that can work!

I did not think my original idea was possible, so this is maybe better.

But how do I change the navigation color on 1 page of my website?

To change navigation color on scroll on 1 page

First, edit that page >> Add a Code Block at bottom of page >> paste this code

<style>
  body header#header.shrink a {
    color: #f1f !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 1/10/2022 at 7:53 AM, tuanphan said:

To change navigation color on scroll on 1 page

First, edit that page >> Add a Code Block at bottom of page >> paste this code

<style>
  body header#header.shrink a {
    color: #f1f !important;
}
</style>

 

woow thank you!

it's almost working!

the only problem is that i can't make my logo change...

 

Schermafbeelding 2022-01-22 om 13.39.00.png

Link to comment
  • 0
On 1/25/2022 at 8:33 AM, tuanphan said:

Change to black, white color or another logo? If another logo, use this new code

<style>
  body header#header.shrink a {
    color: #f1f !important;
}
  header#header.shrink img {
    content: url(https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008__480.jpg);
}
</style>

Replace pixabay with new logo image url

This worked for me! Thank you so much!!

 

Another little question related to this.

What code do I need to add to make the hamburger (cross) also change to another color

when scrolling?

1193343966_Schermafbeelding2022-02-09om19_44_28.png.bdf591031baf98cecc0d422c9c4981c1.png

 

Because now when scrolling in stays white...

Link to comment
  • 0
On 2/10/2022 at 1:44 AM, NoaDK said:

This worked for me! Thank you so much!!

 

Another little question related to this.

What code do I need to add to make the hamburger (cross) also change to another color

when scrolling?

1193343966_Schermafbeelding2022-02-09om19_44_28.png.bdf591031baf98cecc0d422c9c4981c1.png

 

Because now when scrolling in stays white...

Use this

<style>
  header#header.shrink .burger-inner>div {
  	background-color: green !important;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
13 hours ago, tuanphan said:

Use this

<style>
  header#header.shrink .burger-inner>div {
  	background-color: green !important;
  }
</style>

 

thank you sooo much!

i promise, last question, i'm so sorry!

 

but how do i change my logo and the color of the button in the overlay menu only?

 

Schermafbeelding 2022-02-14 om 14.28.32.png

Link to comment
  • 0
On 2/14/2022 at 8:30 PM, NoaDK said:

thank you sooo much!

i promise, last question, i'm so sorry!

 

but how do i change my logo and the color of the button in the overlay menu only?

 

Schermafbeelding 2022-02-14 om 14.28.32.png

Hi. It looks like you solved?

image.thumb.png.0810c95ffdb04cbb39cba41a6b7b7b54.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...