Sticky Navigation and Progress Bar with Webflow
HTML-код
- Опубликовано: 20 май 2024
- Learn how to build Custom designed websites with Webflow:
zpr.io/tnKGG
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj
This is incredible! I couldn't believe there was a tutorial out there for the exact effect I was looking for. Thanks so much for making this!
You're showing us how to do crazy things with webflow but you're also teaching CSS flex box at the same time. I didn't even think about using position: absolute to have an element not be affected by the flex box. Thanks Ran!
Wow! So simple and so elegant. Thanks so much again, Ran!!
Dude, you've literally convinced me to change jobs from game designer to web designer!
There is in youtube doesnt exist tutorial like this. You are incredible
love all your videos! super friendly and comfortable to watch!
Great stuff as usual Ran, I look forward to the style guide video ;)
yeah nice idea and webflow making it possible from a designer side thanks for sharing im loving the channel
Love this kind of content!
This is awesome! Very simple, but very nice
Your videos are super helpful. Thanks!
So helpful, Thank you!
Saving this! Thanks
This is super cool!
How will you adjust the position of the section links in the sticky nav bar to match with the size of the different sections?
For example, if the second section is much longer than the other ones? Can it be done automatically or it can only be done at the end when you know the exact size of each sections and then adjust manually?
Hi there! I just did it manually because I was wondering the same thing. It didn't take too long though, if you turn on live preview you can see what % you are along the page which is really helpful. Just had to adjust each mark slightly to get them to line up correctly. Hope you can get it to work for your case!
@@RemcoBakker548 Davids answer is correct and takes into consideration what you are saying. His solution is doing the edit in Webflow, if you have not used it then you may not understand that his solution is changing the JS.
I loved your tutorial. Something exactly what i was looking for.
I have 1 question
what if my sections are of different sizes, and I want the progress bar to be of exact width of that section? how does my bottom navigation link sections be of corresponding width, as per the section's height they are representing..
For example, introduction section might be of 50vh and the following section of approx 200 vh.. the scroll indicator and nav should also represent the same distribution width wise
Very helpful!
Awesome 🔥
great for galleries thankyou.
You are simply awesome :)
Wow ! this is cool.
It’s really good
Hello, Can you make a video on "how to make skills progress bar", such as 80% css or 80%html. thank you.
genius!
i got it thanks man
Can we get a video on udesly? The workflow seems cumbersome if your have to update the ‘theme’ after you’ve changed the content with their editor
lovit lovit so much!!!!!!
hey! would love some help on this! i tried to do this for a horizontal scrolling page and it didn't seem to work. any tips?
so easy!! I cant deal!!. :)
This only works if all of the sections are of equal height. Do you have a workaround to accommodate different section sizes?
You are awesome :)
how can i change the color of the words for only one section when i make the backround transperant
This is great
I noticed that in the original version the width of the section hyperlink aligns with the progress bar and that probably cannot be achieved by flexbox distribute width alone.
How was that part done and could it be changed automatically with CMS?
That's what I am interested in learning!
Hey there! Can you please send yout question to this e-mail? team@flux-academy.com. Please link the video to the e-mail so the teams can better help you. :) Thanks!
@@FluxAcademy I've got the same question without the CMS bit, shall i email as well?
This looks really cool. How does this play out on mobile? I've been trying to figure out how to create a good experience with these long scroll pages, helping the user know where they are on the page. But you can't really place a whole bunch of text horizontally because of the limited screen space. Perhaps adding "left to right" scroll to flip through the different sections with the progress bar at the top? Is this possible?
i am having the same question...these text link squeezed together on the mobile ...
Great tutorial however it would be great if you could show each of them highlight depending on the section you're in.
thx. my costumer saw in RR website. He asked me to do it. :)
I am thinking about using webflow soon, I am just wondering in what cases would you use a container or section, isn't just using a div and changing the sizing options the same effect?
I have a video about how to structure properly
How do I set the progress bar to sit exactly over the section title? As shown in the original example site.
Just change it in the % section, just start at section 1. If you have 5 section that is 20% per each, so your starting position won't be 0% but 20%. Let me know if that helped
I like webflow, but I'm frustrated because I can't figure out how to truncate a CMS collection list field (like to implement a blog teaser or something, by truncating the body rich text field).
Can this be done? I've looked everywhere and asked a lot but no one can answer it.
Dave Cruickshank have you tried using custom code? Adding something like
text-overflow: ellipsis;
Hey Ran, how do you do the "Every Step of the Way" part of the www.proteantecs.com/? Can you PLEASEEEEEE go over that?
good👍
How could I make this sticky nav only show up after an initial hero section? This way it doesn't clutter the header/background video etc... Thanks again!
You have to set the opacity of the container to 0% on page load, then animate to 100% opacity after the user passes the hero section. The other way is to make the progress bar and menu a sticky position that appears on scroll after 40px or whatever height the hero section is.
I have a simple question ....how do you copy and paste into to different projects?
You have to clone the project containing your object and then Copy Paste from the navigation.
I did that but nothing happened so I have a Mac book and the copy and paste command C and paste is command V ...then I move from clone project into my mines then paste?
@@clevanpollard Short answer: yes, just command C + command V whatever you're trying to copy via the "Navigator" menu (just press "Z" to open that) from your old project into your new project.
Long answer: you need to make sure you're copying the right stuff and pasting it into the right sections/architecture - i.e; make sure to copy the parent element if you want to copy *everything* that's nested inside of it (such as a div that's inside a container that's inside a section, etc.). You want to make sure that the overall structure is still the same, so you're not copying a Section that's nested in the Body, and then trying to paste it within *another* Section in your new project.
Do note though, that when you copy/paste between different Webflow projects, you'll automatically break any links you have (such as a text link or link box, since their destination now no longer exists) and things like custom fonts if you're using them, so you'll need to tweak things and reset links as you go along.
Hope that helps!
Thanks buddy!!! 😮😮😮😮😮😮😮😮😮😮😮😮😮😮!!
happy to hear it was helpful Guillermo!
Wonderful job, but apparently I too stupid to make this work. Containers will not fill page Win10 Chrome
Really Really
Webflow is good for starters. You will get stuck eventually, I suggest you spend time learning the real stuff.
Webflow is utter rubbish. I've worked as a dev for twenty years and never seen such a terrible user interface. It's not intuitive it's a pain in the back side.