Re-expand header on scroll up

[coracle]

Hi there,

I’m trying to have a taller header/navbar section when scrolled to the top of the page and then have it shrink when scrolled down. I got it to work so that the taller header section shows when the page first loads but after scrolling down, it doesn’t re-expand. Is there a way to get it to show up again if I scroll back up?

My site is at: http://dev.timandolive.com

Thanks.

[friech]

Hi Coracle,

Thank you for writing in, please use the method provided here instead. They use that for making the Transparent header change to Opaque on Scroll. The same method can be used for changing the height of navbar using the min-height.

Also, the way you added that banner-image on the header is kind of hacky. You might want to follow that guide from the top instead, which use the first section as the hero image. You would not need the min-height if you follow that.

Hope it helps,
Cheers!

[coracle]

It seems that I would need the build the page in Cornerstone to use the method listed above. If I build it in Cornerstone, how would I go about showing my blog post feed in the rest of the page? (ie, show not just recent post titles and texts but also the featured images etc - just like what you’d see on the blog page)

[friech]

Hi Coracle,

Sorry, I overlook that fact. please create your hero image as a Revolution Slider instead, you can install revolution slider extension under X > Validation > Extensions

After you created the slider set that as the Featured Slider Below Masthead of your blog page.

Hope it helps,
Cheers!