Jump to content

Adding a transparent color change upon scroll with fixed navigation

Recommended Posts

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!

 

Link to comment
  • Replies 6
  • Views 327
  • Created
  • Last Reply

Top Posters In This Topic

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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
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 (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

I check that you have already set the transparent background for header

 

image.thumb.png.f4c40313ef6e4b55a02fa7501d067bc6.pngHave you figured it out?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

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.