navigation Different Navigation on Scroll

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!

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?

Thanks for the prompt responce @Beyondspace

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

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?

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.

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.

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

}

Thanks for your efforts @Beyondspace. Unfortunately the code doesn't seem to work.