Request: Sticky Animated Resizing Header On Scroll

[Brett]

Cheers Tom…

However I am well versed in adding CSS 🙂 heh..

I’m trying to get my head around implementing:
http://callmenick.com/post/animated-resizing-header-on-scroll

It’s something I have been wanting to do in GeneratePress since I first tried it.

I’m after the shrinking logo animation with shrinking menu bar sticky effect as was done on thinkbigatsquareone.com

Can you help with that at all? 🙂

Cheers,

Brett

[Jasper]

I would love to see this ‘Sticky Animated Resizing Header On Scroll’ as an option in the customizer. I think it would make it a lot easier to implement for a lot of people (including me).

[Tom]

This is definitely going to be an option very soon 🙂

For now, this is the first step: https://generatepress.com/forums/topic/request-sticky-animated-resizing-header-on-scroll/#post-242543

Once you get that start done, let me know and link me to your site and we can complete the resizing animation 🙂

[Jasper]

thanks, but i’ll wait….

[Brett]

Heya Tom…

Thanks!
Look forward to seeing this introduced in the future…

For now tho…

I’ve got the basics ready

Can you help from there?

Cheers,

Brett

[Tom]

Can you set the transition to “None”?

[Brett]

Done 🙂

[Tom]

Throw this CSS in there:

.main-navigation .main-nav ul li a, 
.menu-toggle, 
.main-navigation .mobile-bar-items a,
.navigation-logo img {
    transition: line-height 200ms ease-in-out, height 200ms ease-in-out;
}

.main-navigation.navigation-stick .main-nav > ul > li > a, 
.navigation-stick .menu-toggle, 
.main-navigation.navigation-stick .mobile-bar-items a {
    line-height: 60px;
}

.navigation-stick .navigation-logo img {
    height: 40px;
}

[Brett]

Cheers Tom!

That’s the kiddie..!!

Although it creates one tiny issue..

Check the menu – and then when you scroll check it again.
It adds extra line spacing…

EDIT: I mean the sub menus!

🙂

Brett

[Tom]

Edited the CSS above: https://generatepress.com/forums/topic/request-sticky-animated-resizing-header-on-scroll/page/2/#post-302248

[Brett]

AWESOMENESS!!

Thanks Tom…

The old > eh!

Many thanks.. It’s really appreciated..

🙂

Brett

[Tom]

Glad I could help! 🙂

[Author]

Posts