Hi, I’m searching for ways to create a header that pushes the page on hover, and returns to its position once you move your cursor off the header. Here’s a gif that demonstrates it.
Thanks in advance.
Simply have your header setup to be collapsed on load and then use onMouseIn to make the header expand which will in turn push down the rest of your page.
Simply do the opposite and use onMouseOut and make the header collapse for it to disappear again and the page to move back up.
Use a transparent strip which is just below your header so that the user can move the mouse over that to bring the header into view, don’t use the actual header itself!
Otherwise, do something like in these examples
https://www.wix.com/corvid/forum/corvid-tips-and-updates/fixed-frozen-header-example
How to Create Sticky Menu Shrinking Header Floating Menu - Wix Code - Totally Codable with Nayeli
It seems that there’s no option to collapse the header on load:
Also, what do i need to do to make the header expand onMouseIn and collapse again onMouseOut?
Thank you for your reply.
@b4443569
Okay, so in that case you will have to make your page without header and footer and make up your own header from a strip etc.
Then you can simply collapse on load this strip instead and have your onMouse event handlers expand and collapse that instead.
Have a read here about using event handlers.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
Collapse/Expand Wix API reference.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html
Hide/Show Wix API reference.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
Also, note the difference between collapse and hide which reflects on your page too.
A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.
A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.
Finally, see here for more info about how it affects your page.
Velo: How Page Layout Is Affected When Elements Change Size | Help Center | Wix.com