Header Transition with Velo | Wix Fix
HTML-код
- Опубликовано: 8 июл 2024
- In this video, you will learn how to transition your header designs with Velo. Create a dynamic header that changes as the user scrolls down your website. This sticky header transition will help keep your websites content visible no matter what section the user is on.
Want the Velo code? Get is here: www.wixfix.com/post/header-tr...
Wix Image Overlays: • Add Wix Image Overlays...
Want to hire us? Reach out on the website: www.wixfix.com
Don't forget to SUBSCRIBE and COMMENT any questions below!
THANK YOU FOR WATCHING!!
Music by Chillhop
Music: chillhop.com
#Wix #WixTutorial #DynamicHeaders 
Хобби
How to make the header transparent, so that the video/ image extends to the header section
This tutorial was so useful, I really struggled to understand the one on wix. Plus the fade feature is a lot more elegant. ❤️
Thanks!!, I was looking all over for this :).
Really appreciate this 🙏 Exactly what I was looking for!
Thank You sooooooo Much... So glad that it worked..
Thank u so much!
Watched many explanations, only this one worked! Thanks a lot!
Saved me almost 200eu, because I did not have to ask a Wix expert to do this.
Great to hear!
This is helpful and works on my wix site. I started using editor x. Is there a way to accomplish the same thing on Editor X?
Awesome video. But I have a question. How do you eliminate the code from mobile site only? Dev mode seems to effect both views.
Please make a tutorial on how to create glassmorphism effect in wix.
It worked for me as well but it is not appearing in mobile version. How to fix it? Kindly help
is there a way to have 2 seperate colors in the text on the headers. so first header black and second header white
Does it work on mobile view
Hey Wix Fix, can you help me? I'm trying to make a header that overlaps to the next section, I can't seem to figure it out. I would really appreciate the help, thank you.
This was super helpful but I have a bug I cannot fix. Eveyrhting works exactly like you showed but when I scroll back to top of the page, the 'newHeader' strip appears. Any idea what can I do to fix this?
Managed to solve it. Becasue I have a big image that takes on the whole screen after the page loads, I set the transition strip just below that image. When I scroll down, everything worked as intended but when I was scrolling back up, first I was triggering viewportEnter with my top edge of the screen but when I scrolled to top, I also triggered viewportLeave with bottom edge of my screen. Solution was to make the transition strip larger so that is coers some part of the image I have on page load. Then I do no trigger viewportLeave.
This looks so sleek, i love it. is there a way to have the menu text one color on the HOME page, then a different color on the rest of the website pages? For example, white text on the HOME page, then black on the rest. I'm on your website right now. If this is possible, I'll be in touch for a quote.
I have the same question. i have not seen any video about this topic
I too found this more helpful than the other Wix vid but may have got excited too soon, copied code and it is coming up with errors with Invalid Character, parsing error:unexpected character " ' ". and expected 1 arguments but got 2 inregards to fade? Aaaahhhhhhhhhh. Put a call out to Wix and they are saying this requires top level Velo coding so expecting an email. I was really hoping this would work appreciate any recommendations?
for me it worked to just change all the ' to "
hope it helps
can i fade faster
OMG it worked! Is there a simple way to apply to all pages or do I have to manually do this process for each page?
You have to manually type the code for each page unfortunately.
@@wixfix Turns out you can copy paste the code per page, but I had to copy paste the transition strip as well. Default and new header remained everywhere. At least for me anyway. Thank you so much for the help
one question for you! i didnt delete blank page on home menu pls help me :)
Feel free to join the Wix Fix Community group on Facebook for help! There you can share screenshots of your issue.
can you please help me?
How do you make the head transparent like that. when I do it doesn't show the picture of the main strip under it
It's not a header, it's a strip; go to page layout, delete the header and replace the header position) with a strip and use it as a header, change the bg opacity to 0 and you have a transparent header.
@@vyhoang3476 I tried that, but its not possible to make a strip freeze like he does the header in the video. any workaround for that?
I am unable to do it. Can you please help me?
Same.
How do you copy these header settings onto all the other menu pages? There must be a shortcut for this instead of doing each page one by one like this... haha
Hi. Did you find any solution?