Request: Sticky Animated Resizing Header On Scroll

[Bard]

Hi!

First: thanks for a super theme! Just purchased the premium pack.

I would very much like an option/plugin to make a menu/navbar sticky and with an option to re-size on scroll.

I have noticed You have done this on thinkbigatsquareone.com using a GP child theme, so i hope this can be done and implemented as a plugin/option?

Regards. Bard

[Tom]

Hi Bard, sorry for not getting back to you sooner! This one slipped under my radar!

This is the tutorial I used for that website: http://callmenick.com/post/animated-resizing-header-on-scroll

It could definitely turn into an option in an add-on one day – just need to find some time 🙂

Hope this helps!

[Simone]

If I may, can I bump this topic?

I am trying to do the exact same and I’d love to do this on every site I develop honestly.
I am looking up the tutorial but I’m a bit confused by it: where would I put the javascript in? Might be able to figure out how to rewrite the CSS part but no idea how to implement JS at the moment.

This seems easy, if only I understood it a bit better. Can you help me?

All the best,
Simon

[Tom]

Hi Simon,

Not easy, but do-able!

First, let’s set it up.

1. Hide your header:

.site-header {
    display: none;
}

2. Set your navigation to be sticky and select the “None” effect in “Customize > Layout > Primary Navigation”.

3. Add your logo to the navigation in the same section, and set the position to “Sticky + Static”.

4. Increase the height of your navigation in the same section.

Once you do that, let me know (and possibly link me to your site), and we can create the resizing animation 🙂

[Simone]

Thank you so much for the superfast response!

I did what you said, unsure why am I making the header invisible but I’m all ears!

The site is hosted offline with serverpress so at the moment I can’t give an example.
I’m working with beaver builder as well, although that shouldn’t affect the header I think.

EDIT: Ok, by making the header visible I realised it already almost is how I want it to be.
All I wanted was basically that the top header would become a bit smaller, and the logo would reduce in side, so it becomes a small bar on top (like on facebook).
If I put the animation stile to “none” on the primary navigation, it resizes smoothly exactly as I wanted it to.
I had also set my header to a purple half-transparent colour, and the navigation to transparent, so my header became with a transparent background if I scrolled down, but I fixed it with this

.navigation-stick.main-navigation{
background: rgba(122, 12, 149, 0.62);
}

However, this is not perfect as if you scroll only a little bit, you will get the background of the header AND the background of the navigation (which now spans the whole width) on top of each other, creating a rectangle of darker purple. So it’s probably not the cleanest solution.

Also one thing is missing: the logo disappears when I scroll down. Is there any way to make it stay, but just resize to a further smaller size?

[Simone]

Here is what I mean, just to make the explanation more evident

[Tom]

There’s no real way to fix the first issue unless you go with the original method I suggested (hiding the header and showing the navigation only).

As for the logo, in “Customize > Layout > Primary Navigation” make sure “Navigation logo” is set to “Sticky”.

If you decide to go with my method, you’ll want it to be “Static + Sticky”.

[Simone]

Ok, I understand. I think this is easy enough and is already actually built in your platform, so that is wonderful. IT’s just not immediate to understand.

Can I ask you, I find it very unclear, what does Sticky and Static mean?
I interpret them as the same thing, as “the navigation stays on the same place on the screen”.
What is the difference between the two, and what happens when you combine them?

Thank you for all your help, I’m definitely leaving 5 star reviews 🙂

[Tom]

Sticky refers to the menu being stuck to the top of your screen as your scroll down.

Static is the default, where the menu doesn’t move when you scroll – it stays in the original position.

So you can add the navigate to the sticky menu (only when it’s attached to the top of your screen), the static menu (when it’s not stuck to the top of your screen), or both.

Hope this helps!

Thanks! 🙂

[Simone]

Ohhhh I get it, so this is to determine where the navigation is meant to appear, not how! Thank you, that makes sense. I was just stuck thinking how can the navigation bar be static and stuck at the same time if they are different positions. You just pop it in both.

Thanks again!

[Tom]

You’re welcome 🙂

[Tim]

Hey Tom,

I am using “Hero Menu” to get this resizing effect.

Above you said

It could definitely turn into an option in an add-on one day – just need to find some time 🙂

I would love to stop using the plugin if you could find the time to add this option to the menu options for the premium pack

Thanks for the great theme and premium pack

[Tom]

Giving the sticky navigation a different height would be a good option.

It’s quite easy to do with CSS for now.

Have you completed these steps yet?: https://generatepress.com/forums/topic/request-sticky-animated-resizing-header-on-scroll/#post-242543

If so, can you link me to your site?

[Brett]

Heya Tom…

Sorry to hijack someone else’s thread!

I see it is an old thread but it details exactly what I am trying to do.
I have followed all instructions up to a certain point.

I’ve hidden the title and have the sticky + static logo on etc.

Just wondering how to use the CSS you linked to?
Do I add a CSS class to the header?

I can start a new thread if you wish – I just didn’t want to duplicate!

Cheers,

Brett

[Tom]

Hi Brett,

This might help: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Author]

Posts