Jump to content

Different Navigation on Scroll

Recommended Posts

40 minutes ago, DominicSkeete said:

Good day to all!

I'm trying to understand how to achieve the navigation experience in the below website.
https://asfcanada.ca/en/

When scrolling, the full logo changes to the logomark, and the navigation disappears with the exception of the buttons. I would like to implement this on a website to be built soon.

Any help would be appreciated!

When you scroll down, Squarespace have a special class 'shrink' so we can use it to set the appropriate style for you logo

Can you share your site so I can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
On 12/8/2022 at 2:13 AM, DominicSkeete said:

Thanks for the prompt resp

The site I wish to implement it on is https://www.empyrealstudio.com/ but that site will get a complete refresh soon, so I just wanted to get all my ideas in order to see what was possible.

With that said, I guess there would be no harm implementing it now I guess. If there is anything else you know let me know. Thanks

You mean

When scroll

Site Title + Navigation will be disappear?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

 

On 12/10/2022 at 7:45 PM, DominicSkeete said:

Hi @tuanphan

It will be like this https://asfcanada.ca/en/

Yes, but it's not the site title because the text in the logo will be specific to the logo and not a generic text. When scrolling it will change from the full logo to just the symbol.

Changing the fixed header style into scroll back will show the header when you scroll up.

image.png.df5d7d583e62aaba0f8088d7b86a383e.png

Try the following Css code to set logo hide when scrolling up 

header[style="transform: translateY(-100%);"]{
  transform: unset !important;
}

header[style="transform: translateY(-100%);"] #site-title {
  opacity: 1;

}
header:not([style="transform: translateY(-100%);"]) #site-title {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);

}

I think it could be an possible approach to start

header[style="transform: translateY(-100%);"]{
  transform: unset !important;
}

header[style="transform: translateY(-100%);"] #site-title {
  opacity: 1;

}
header:not([style="transform: translateY(-100%);"]) #site-title {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);

}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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.