Jump to content

Adding a transparent color change upon scroll with fixed navigation

Recommended Posts

Posted

I'm trying to add a transparent color to the fixed top navigation upon scroll using the following code to no avail:

.Header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10;
    z-index: 999;  
}
/* Mobile */
.Mobile-bar {
    background-color:transparent;
}
/* Desktop */
.Header {
    background-color:transparent !important;
}
.Header{
   transition: 0.2s;
  color: #f6f6f6;
}

What am I doing wrong?

Thank you!

 

  • Replies 8
  • Views 500
  • Created
  • Last Reply

Top Posters In This Topic

Posted
1 hour ago, BoundtreeM said:

I'm trying to add a transparent color to the fixed top navigation upon scroll using the following code to no avail:

.Header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10;
    z-index: 999;  
}
/* Mobile */
.Mobile-bar {
    background-color:transparent;
}
/* Desktop */
.Header {
    background-color:transparent !important;
}
.Header{
   transition: 0.2s;
  color: #f6f6f6;
}

What am I doing wrong?

Thank you!

 

Have you tried using the dynamic style and set position fixed basic?

image.png.51bb6a9035c4a99c8aba3d0fb196ca5d.png

image.png.03365a10a399be406b045b0bb17b1f4e.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

Posted
11 hours ago, BoundtreeM said:

I'm not seeing that option in the menu. I'm using the Heights template. this is what I see :

Screenshot 2023-01-19 at 5.04.35 PM.png

Screenshot 2023-01-19 at 5.04.32 PM.png

Can you share your site with the protected password so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> 🤖 Ask me anything

  • 1 year later...
Posted

@BoundtreeM I'm having the same issue. And though there is a way to make the header solid on a scroll by changing it to DYNAMIC as @Beyondspace indicated above, it only allows you to turn it the color of the next section.  That doesn't help me. 

@Beyondspace, can you help us with this? I want to be able to indicate the color I want the header to change to, and I don't want it to be the first section color. I want it to be white. 

Thanks!
 

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.