Request: Sticky Animated Resizing Header On Scroll

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

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

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

thanks, but i'll wait....

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

Can you set the transition to "None"?

Done :-)

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

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

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

AWESOMENESS!!

Thanks Tom...

The old > eh!

Many thanks.. It's really appreciated..

:-)

Brett

Glad I could help! :)