Jump to content

Navigation color change 7.1

Go to solution Solved by tuanphan,

Recommended Posts

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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
  • 2 weeks later...
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
  • Solution
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
  • 3 weeks later...
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
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
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
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.