Alternate navigation style on scroll

Specific customization
Written By Beatriz Caraballo

The client was looking to customize certain areas of their site, including the navigation bar within project pages. To maintain the minimal look they had across the entire website, they needed the header to keep a transparent background while on top of the hero banner, and then showcase a solid color once the content area of the page was reached, on scroll.

Using the native header as a starting point, I set up their alternate navigation styles on scroll based on the boundaries of the hero background.

Additionally, considering the fact that some project pages had a lighter-colored image than others, I included a user-friendly dark/light option for the alternate nav colors that could be selected through the native Color Themes for the section.

 
Beatriz Caraballo

Hey! I’m B, a customization expert.

I code the heck out of Squarespace and teach other designers how to do it too, one wtf at a time.

https://beatrizcaraballo.com
Previous

Multilingual custom site for opera singer
Next

Custom lightbox for artist statement