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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

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

 

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

}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.