Nav Takeovers | Webflow Development Tutorial

-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
skl.sh/2PU9tML
ABOUT -
Nav Takeovers are a beautiful way to introduce users to all the content on your site without overwhelming them. We'll take a look at three inspiration sites and then dive into Webflow development.
Project Site
jocando-tutori...
Read-Only Link:
preview.webflo...
CHAPTERS -
Chapter 01 | Inspiration Sites - 00:48
Chapter 02 | Styling the navbar - 02:14
Chapter 03 | Styling the nav menu - 07:05
Chapter 04 | Animating the nav menu - 26:32
Chapter 05 | QA-ing the nav - 36:40
Chapter 06 | Closing Thoughts - 47:00
All Tutorials:
jocando-tutori...
INSPIRATION SITES -
Provider Store
www.providerst...
Bruno
www.callbruno....
Bonjour Paris
www.bonjour.ag...
NAV TUTORIALS -
Pixel Geek
• How to Webflow: Full s...
Timothy Ricks
• Building a Better Webf...
ABOUT ME -
Dribbble
dribbble.com/J...
Twitter
/ jaocando
Instagram
/ jose.a.ocando

[@BigheadSinan]

I learned Webflow because of you like 2 years ago maybe? Now I make money as a freelance webflow developer. Thank you a lot!

[@JoseOcandoVideos]

No way! That's awesome. That makes me so happy and encourages me to keep making content. Thanks for sharing :-)

[@scottcitron]

I refreshed my page and problem solved! Crystal clear now.

[@CodeWithMalinda]

We need more tutorials. Thank you from the deepest heart.

[@JustUXChannel]

Thanks so much for this, your presentation style is perfect. So easy to follow and the way you break things down is super helpful!

[@hemansjr]

Thanks man ❤️❤️been wanting something like this for a long time

[@Oli_Timmis]

Great to have you back Jose, hope you're doing well! Thanks for the tips 💪🏼

[@mauricioguerra2151]

Very good, thanks for the video and for the W in capital letters

[@garyvoigt321]

Some really beautiful solutions here. Loved it.

[@noirvision1152]

Great!! Thank you, Jose. Keep up the good work.

[@MrHazelwood]

Super informative video, thanks! This video landed just at the right time 😊 I thought I'd be smart and build my own custom nav but definitely going to use the webflow one instead now you've shown how to make it behave. Thanks again!

[@congruihu2113]

Great tutorial, thanks a lot!

[@EdmundFaust]

That’s cool - Wasn‘t looking for it but now I’m going to do it

[@scottcitron]

Great tutorial, Jose, but the video quality is so low it's hard to see a lot of what you're doing in WF. KZbin reports that your video is only 360p. Can you repost at higher resolution? Thanks.

[@aminuteofhappiness6852]

KZbin does that when it's a new video uploaded and you watched it minutes after the upload. Wait for like 30mins or an hour and you get the highest video quality :)

[@scottcitron]

Really? That’s news to me! Thanks for this great tip.

[@nickblackmon842]

You're a legend.

[@elmedin26]

Thank you for the tutorial. So awesome!

[@AbdulWahab-pk4jx]

Jose, your video is great. I am gonna watch it at the end. BTW, I am facing trouble understanding BEM CSS naming method. Can you make one video on it? It will be a great help.

[@dimitrisqq]

agreed

[@Jochemms]

Really well explained video, thanks you❤️

[@NicolasMENEZ]

Hello Jose, hello all! I'm wondering if things have changed since the video has been posted cause I'm having issues making the no-scroll works... The code seems to don't work at all :'( I was also wondering if the process was the same to target all the pages, in the "project settings" area... 🤔 Maybe somebody can help plz ? Best regards 🙏 (P.S. : thanks a lot for your tuts Jose, that's a really great job you offer us!)

[@mohammedelamin683]

Many thanks for tutorials

[@thewebart]

Thank you Jose!

[@GoRichardPro1]

Learned a-lot with this. But I think it would be faster if we were using GSAP for the animations haha. Interactions on webflow is pretty tedious

[@JoseOcandoVideos]

I'm right there with you. I've used anime JS before and that was quite a bit easier. It's also easier to maintain because you don't have to reconfigure the animations every time you change up the links.

[@programmierungabos2544]

Hey, I am a designer and would love to integrate Webflow into some of my workflows with developers. I currently only use Webflow to build complete websites for clients, that will forever stay in the Webflow environment. Now I would like to know how good the Webflow code export feature is, from a developer perspective. If I export the code, is it useable for developers in production or are they easily able to pick certain code parts and transfer them into their codebase (maybe with some refactoring)? So overall do developers appreciate it over a static design file (Figma), a prototype (MarvelApp, ProtoPie) and can work faster with it? Also is the HTML/CSS/JS code helpful for projects built with ReactJS as well, so can developers transfer fast to ReactJS or is there even a possibility to turn Webflow code directly in to ReactJS components?

[@ki001]

Brilliant