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

How to Create Translucent Nav. Bar then Scroll to Solidify?

Question

Site URL: https://wandpdesign.com/

Hi! 

I've been trying different methods to no avail on how to get a translucent nav bar that blends into the background when you open my site, and when you scroll down it turns into a smaller white bar up top. Attached link for example. 

 

I'm using the Clay template in the Brine Family. 

 

Thank you in advance!

Edited by mcgeesocial

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

I see you fixed? https://wandpdesign.com/

If above link isnot your site

You need use JS/jquery + CSS to do this.

If you share link to your site, I can take a look. Each template has different class so need different code.

The idea here is that when scrolling down, JS will add a class to the nav, and you can use CSS for that class. When scrolling up, JS will remove that class so that nav can return to normal.

(If it's fast, I'll send the code. However if it takes longer than I thought, I will not answer free for this.)

 


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...