Jump to content

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

Recommended Posts

Site URL: https://wandpdesign.com/


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
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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


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.