New header when you scroll down

[Anders]

Hi

When I scroll down the page, I would like a new header to show up.

Not having the normal menu navigation, but a new header.

The new header should have a button with call me, phone number and maybe a menu link or two..

Is that posible ?

[Leo]

Hi there,

It’s a bit tricky but likely doable with some CSS.

Can you first add all the menu items (static and sticky) into one menu and add the class sticky-only to the menu items that would only display in sticky navigation?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Let me know when this is done and I’ll tackle the CSS part 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anders]

Hi Leo

Awesome

I have created 3 items…

phone number ——– About us – CTA button

My goal is to have logo on the left, a phonenumber with some icon (https://codepen.io/callmenick/pen/XdwmeV) – a simple menu (about us) and a get a call button to the right.

I don’t know if it requires more classes on the menu items?

[Leo]

Can you activate the sticky navigation first?
https://docs.generatepress.com/article/sticky-navigation/

I’m not sure if the animated icon will work like that in the menu so you will have to test that out.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anders]

The sticky navigation is on… But maybe it’s not working, it’s an AMP page.

[Leo]

Can you try installing this plugin first?
https://github.com/tomusborne/amp-for-generatepress

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anders]

It’s installed… but does not support the second menu, or the sticky navigation 🙁

[Leo]

I checked with Tom and unfortunately AMP doesn’t support javascript, which the sticky navigation uses.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts