So I know the typical way of having the primary header to stick when scrolling, however I made a 2nd header with a different logo on the same header (much smaller and the padding greatly reduced to streamline the header on scroll). I want to display this 2nd header only on scroll while the primary one is revealed when you scroll back to the very top of the site. I tried doing this with interactions and couldn’t get it to work the way I wanted it to behave.
1 Like
Other than the logo and it’s size, is the header after scroll mich different from the original one? If not, I think the easiest way would be to adjust it via css using the class the header gets after scrolling. That way you also only have to manage one header.
If you got a link with both headers I can whip up some css tomorrow when I’m back at the pc if that’d help.
yes, the logo is different from the first one. I’ve been experimenting with the sticky features and interactions on scroll by showing and hiding, and still not operating the way I’d like it to.
The first header is thicker in height, while on scroll the header is slimmer but I’d like it to show up again when the user scrolls up slighting like the default behavior when enabling stick and Slide up after scrolling. But when you go back to the very top, the primary (default) header is shows up while everything else disappears.