We would like a different image in header when page is scrolled

Support
#1

I am going to assume this would be custom JS but not sure if there is a simple solution.

Part 1: We would like an image to show, then on scroll be replaced with a different image. Both images are same size.

Part 2: We have a ‘Navigation Inline’ element that we would like to hide on scroll - reappear at top

Part 3: We have a ‘Navigation Dropdown’ element we would like to show on scroll - disappear at top

We found a help topic here that showed us how to replace the background color and that worked great. These 3 options though, we have yet to find a solution.

#2

Hello Ronald,

Thanks for writing in!

All of those three items is possible. Simply create two bars. One bar will only display as static bar as it displays on top. This bar will have the 1st logo and the navigation inline element. The second bar with the different logo image and the navigation dropdown will be hidden initially. Once the user scrolls the page, this second bar will appear.

I would recommend that you check out this video tutorials to be more familiar with the header builder:

Hope this helps.

#3

Thank you. Layering worked perfectly using two bars.

#4

We are delighted to assist you with this.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.