Navigation color change 7.1

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! 

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?

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?

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>

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...

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?

Because now when scrolling in stays white...

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?

 

Because now when scrolling in stays white...

Use this

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

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?

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?

 

Hi. It looks like you solved?