Want top logo to get super big when you scroll up (and main navigation links go above)

Hello, 

How could I add this design feature to my current site? (Giant logo on scroll up and main navigation links go above)

https://ferme.shop/

My site is here www.sydneykrause.com

This is possible in SS 7.1 & some templates in 7.0 (Need to use code)

What is your site url? We can help easier

Hello 🙂

www.sydneykrause.com 🙂

thank you! 

On 11/7/2022 at 10:35 PM, SYDTHESQUID147 said:

Hello 🙂

www.sydneykrause.com 🙂

thank you! 

First, edit Header > Choose Fixed Header > Basic

Next, add this to Design > Custom CSS
 

.header-title-logo a, .header-title-logo a img {
    width: 500px;
    position: relative;
    max-height: unset;
    transition: all 0.3s;
}
.shrink .header-title-logo a, .shrink .header-title-logo a img {
    width: 100%;
    max-height: 150px;
    transition: all 0.3s;
}

Hi @tuanphan! This helped so much, thank you! I'm just running into an issue where the logo is not centred, would you be able to help?

The page is https://www.andasanas.com/new-page (I've used the page ID as I don't want this to affect my coming soon landing page yet).

Hi again @tuanphan, the logo on this site is exactly what I'm hoping to achieve. https://shopbaina.com/

4 hours ago, mbockmaster said:

the logo on this site is exactly what I'm hoping to achieve

I'm not tuanphan 🙂 but I have a comment. You might be able to get close to this effect but not exactly the same without doing too much violence to the structure of the page, which may break the header. SS is often doing dynamic behaviours with the header.

On the example you show the "header" appears to be under the first "section". SS's site headers are always at the top of the site.

Your logo may be a challenge as it appears to be a logo/tag line combo?

While it is fairly trivial with CSS to begin to get this effect going. It will take more than just a few lines of CSS to get a final effect, assuming it can be achieved at all.

The hard part comes in animating the logo from the bottom of the screen into it's position into the header. That requires JavaScript (business plan or above) and some not so easy JS code. You basically have to monitor the scroll position of the page and animate based on that.

16 hours ago, creedon said:

I'm not tuanphan 🙂 but I have a comment. You might be able to get close to this effect but not exactly the same without doing too much violence to the structure of the page, which may break the header. SS is often doing dynamic behaviours with the header.

On the example you show the "header" appears to be under the first "section". SS's site headers are always at the top of the site.

Your logo may be a challenge as it appears to be a logo/tag line combo?

While it is fairly trivial with CSS to begin to get this effect going. It will take more than just a few lines of CSS to get a final effect, assuming it can be achieved at all.

The hard part comes in animating the logo from the bottom of the screen into it's position into the header. That requires JavaScript (business plan or above) and some not so easy JS code. You basically have to monitor the scroll position of the page and animate based on that.

Thanks for the reply @creedon! I'm definitely not opposed to purchasing a plugin, if you happen to know where one like this could be found 🙂

On 11/11/2022 at 1:16 AM, tuanphan said:

First, edit Header > Choose Fixed Header > Basic

Next, add this to Design > Custom CSS
 

.header-title-logo a, .header-title-logo a img {
    width: 500px;
    position: relative;
    max-height: unset;
    transition: all 0.3s;
}
.shrink .header-title-logo a, .shrink .header-title-logo a img {
    width: 100%;
    max-height: 150px;
    transition: all 0.3s;
}

 

Hi Tuanphan. Is there a way to do this in reverse? IE. start big then shrink down on scroll down? `thanks!