Hi! I need to create a header that appears when hovering the mouse over it and disappears when you hover out. How can I do this?
But when the Header disappears, how can you hover the Header again when it’s not there anymore???
Btw: have look at this for hide/show elements:
https://www.wix.com/corvid/reference/$w.HiddenCollapsedElement.html#hide
and this for hover (mouseIn/mouseOut):
https://www.wix.com/corvid/reference/$w.HiddenCollapsedElement.html#onMouseIn
You can use onMouse or onViewPoint
https://www.wix.com/corvid/reference/$w.ViewportMixin.html
If you are unsure about OnMouse or onViewport event handler then have a look at this page here which will help explain to you how to use them.
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events
Remember that this won’t work on mobile devices obviously as you can’t hover on a mobile, so you will need to probably look at adding formfactor for desktop devices for the onMouseIn and onMouseOut calls in your code.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
Plus, you can’t bypass this and hide the header/footer on desktop or mobile and keep on the other version either, it is same on both.
https://support.wix.com/en/article/request-setting-the-header-and-footer-to-only-display-on-your-mobile-site
See here for working with mobile only elements and if you want it to be for desktop versions instead, then just take the mobile code part and replace mobile with desktop,
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
Also, have a look at this frozen header tutorial from Wix and it will show you how to do it in your editor with all code setup too.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/fixed-frozen-header-example
Finally, have a look here at Nayeli (Code Queen) and her tutorials for headers too.
Wix Header Change on Scroll - Floating, Shrinking, Scrolling, Animated
Tutorial Sites: Floating Header
https://codequeen.wixsite.com/floating-header
Shrinking Header
https://codequeen.wixsite.com/new-shrinking-header
Animated Header
https://codequeen.wixsite.com/animated-header