Create a sticky navbar with a dropdown menu - Webflow tutorial

Поділитися
Вставка
  • Опубліковано 12 лис 2024

КОМЕНТАРІ • 137

  • @JdotCarver
    @JdotCarver 4 роки тому +232

    I don't even use web flow. These videos are just that good.

    • @MoMoMan0
      @MoMoMan0 4 роки тому +2

      I'm telling ya, you should consider it.

    • @DeArmondTool
      @DeArmondTool 4 роки тому +2

      ME TOO.... I don't use Webflow but these are GREAT!!!!

  • @rodrigo.lamadrid
    @rodrigo.lamadrid 3 роки тому +90

    These have to be the best company-produced tutorials I've ever seen. Engaging, fun, and more useful than creator-produced content. Keep it up!!

  • @CameronBrownOKUSA
    @CameronBrownOKUSA 4 роки тому +17

    I've never had so much fun watching tutorial videos. Well past midnight here and I just keep hitting next and learning while laughing! Haven't built anything with the platform yet but can already tell I'll be ending my Squarespace subscription.

  • @zilosphoto
    @zilosphoto 4 роки тому +9

    these videos are legit. After seeing so many of these, i signed up, started using webflow, purchased it, danced a little, went back to webflow and made a site.. then danced again, drank some coffee and went to sleep, in that order. EPIC

  • @GangstaMindVC
    @GangstaMindVC 4 роки тому +10

    Your tutorial videos are just priceless. This is even better than some Netflix shows.

  • @babyshmay
    @babyshmay 2 роки тому +3

    this video was so good i had to leave the webflow website to come like it. i was forced, compelled by respect for quick humor and efficient tutorials. 10/10

  • @anthonylee907
    @anthonylee907 4 роки тому +86

    Webflow is ok. But this narrative guy is awesome!

  • @the_ecips9692
    @the_ecips9692 4 роки тому +41

    I can't tell you guys how much I love webflow. You made my life SO MUCH EASIER! Thank you for continuing with the videos and the development.

  • @HACHmusic
    @HACHmusic 4 роки тому +5

    I've never enjoyed a tutorial this much, ever in my life!

  • @Benji-Lindz
    @Benji-Lindz 2 роки тому +2

    9:23 Wow... that's got to be one of the cleanest cuts I have ever seen in a UA-cam video.

  • @shubhamraut1039
    @shubhamraut1039 4 роки тому +2

    I would learn anything if that guy narrates the tutorials. Great job!

  • @DanzEnglish
    @DanzEnglish 4 роки тому +5

    Finally, the narrator's face. Love these vids. So straightforward. Thank you.

  • @martinbajsic4836
    @martinbajsic4836 3 роки тому +3

    as a video editor - turned motion designer - turned motion designer pursuing web interaction design, all I can say is:
    never regretted opting out from video editing until now, realizing that Dylan guy gets to edit this perfectly dry humor all day long and get paid for it. Kudos to Dylan, these videos are next level

    • @Webflow
      @Webflow  3 роки тому

      Thanks, Martin! 💙

  • @mrpips76
    @mrpips76 Рік тому

    You have the best instructional video's by far. Clear, concise, and straight to the point. Great use of video real estate! Much appreciated!

  • @MrrDoNN
    @MrrDoNN 4 роки тому

    after 3-4 years on webflow .... i discovered these videos ... love the editing and jokes! ... and the webflow stuff as well..

  • @stewdean
    @stewdean 4 роки тому +10

    Ah, so that's what he looks like. Love the presentation style.

  • @martijntreffers49
    @martijntreffers49 4 роки тому +5

    Finally someone who gets it: adding fun to a tutorial video makes it soooo much better to digest (and helps remember the content) *Thank You*

  • @Marsell88
    @Marsell88 4 роки тому +2

    Your humor reminds me of one by the name of Andrew Kramer... and that's a good thing. Brilliant...

  • @swaggerbauer
    @swaggerbauer 4 роки тому +2

    i really like the humor and the tone of these videos.. and also i'm learning stuff! used to be "writing" webpages in vs code or notepad++ back when ... but now i, too, point and click and it doesn't feel bad ;)

  • @mariahcline9925
    @mariahcline9925 3 роки тому

    These videos are better than most TV shows.

  • @Itsrichayo
    @Itsrichayo 4 роки тому

    The Champ was here. Another winning explanation

  • @kelvinedionwe
    @kelvinedionwe 2 роки тому +1

    Best tutorial I've watched.
    Funny and engaging. Great work webflow.

  • @ArdikaPercha
    @ArdikaPercha 4 роки тому +1

    OMG one of the best tutorial practice video I ever seen 🥺

  • @conzone
    @conzone 8 місяців тому

    I'm sure it's a love or hate feeling towards this video style, seems like more love. But man the humor and dialogue is brutal IMHO. I just want the information and to figure out how to do something without all the quirky comments. Sure you get a little chuckle the first couple of times and I'm happy you guys are clearly having fun making these, though beyond that I'd just prefer to get the information delivered in the shorted time possible without the extra time waste.

  • @2xKH
    @2xKH 4 роки тому +3

    I’m gonna buy a subscription and try to use Webflow just because of how amazing and creative the team behind this tutorial is!! Amazing job

  • @TheBrandSamurai
    @TheBrandSamurai 3 роки тому

    I've come to expect the little humour jabs in each video.
    I'm interested in learning more about how to use the platform, sure, but a part of me is just waiting for the punch.
    Then BAM! There it is.
    So good.

  • @misterk7_-
    @misterk7_- 3 роки тому +2

    Such an amazing tool, and great tutorial video! This is something they would spend an entire class teaching you at College and you would only catch not even half the amount of information this video presents in only 9 minutes.

  • @rukeyburg1084
    @rukeyburg1084 Рік тому

    I don't care if this is acted or real, the scenarios with the mouse problem is genius!

  • @NonTwinBrothers
    @NonTwinBrothers 3 роки тому

    I love how they're literally just playing these as ads now
    Good stuff

  • @thorbjorningason8479
    @thorbjorningason8479 4 роки тому

    learning has never been more fun

  • @AndrewOnTestingCars
    @AndrewOnTestingCars 4 роки тому +1

    I now love Webflow just because of this video! 😂even though I have never used Webflow before. Thanks very much

  • @stripypaint
    @stripypaint 4 роки тому +3

    The clothes bit literally made me lol! 🤣

  • @TheKetoSurvivor
    @TheKetoSurvivor 4 роки тому +3

    That was awesome! I can't wait for a demo that detailed showing how to make a grid-based big/mega menu that is fully responsive at all breakpoints. I've been fighting most of this year trying to figure that one out. Driving me CrAzY!

  • @goharkhan045
    @goharkhan045 3 роки тому

    amazing style of teaching. Great bro

  • @binli3217
    @binli3217 2 роки тому +1

    You guys made me laugh, outstanding entertainment! Well done.

  • @konohamaru8497
    @konohamaru8497 4 роки тому +48

    These jokes made me want to learn webflow, nocode gang 🤣🤣🤣

  • @albertoventures6365
    @albertoventures6365 4 роки тому

    As always, taking out the line between fun and learning. I LOLed. But not that usual "LOL" that we send when a friend shares a mildly amusing meme. I actually laughed out loud. I'm about to make the most beautiful nav bar today baby. Oh yes. I just had coffee.

  • @mannylopez1165
    @mannylopez1165 2 роки тому +1

    YOU GUYS R THE BEST!!!

  • @yuelingtan5825
    @yuelingtan5825 4 роки тому +5

    5:25 "Three seconds." got me wheezing 😭

  • @emekaajuzie1340
    @emekaajuzie1340 4 роки тому

    Awesome tutorial...absolutely sold on web flow...and yes that nav bar looks delicious.

  • @cyperbug917
    @cyperbug917 3 роки тому

    Webflow is ok, but this guy is awesome!!

  • @scottdanelesko7868
    @scottdanelesko7868 4 роки тому

    I watch these videos to learn, sure, but also to fill the necessary prescription for humour these dark days require.

  • @DavidCouillard
    @DavidCouillard 3 роки тому

    My 2021 goal is to be as good as these Webflow guys at making tutorial videos. (And most probably master Webflow at the same time!)

  • @wey.p1
    @wey.p1 11 місяців тому

    the "3 Seconds" voice at background got me 🤣

  • @andrewmackayarchetypemac7619
    @andrewmackayarchetypemac7619 4 роки тому +1

    Who wrote this? The Webflow 101 videos that preceded this one were perfectly executed but this one is exquisite. I only heard of Webflow today but I want to build a site with it just to see if it's as much fun as the tutorial. But I want to watch the rest of the tutorials first. 🤣

  • @Mettabeshay
    @Mettabeshay Рік тому

    the 3 seconds joke killed me

  • @Cs-ys2hx
    @Cs-ys2hx 4 роки тому +1

    Love you guys, you're AWESOME!!

  • @Talentaire
    @Talentaire 2 роки тому

    Excellent videos and really funny too.

  • @jenniferward6821
    @jenniferward6821 4 роки тому

    Cutest ears. Wingnuts look good on him!

  • @MartinWetzels
    @MartinWetzels Рік тому

    Thanks , that was a great help.
    btw. put in some batteries in the clock behind you :)

  • @onwukafavour2278
    @onwukafavour2278 3 роки тому

    Thank you so much for this, it was really helpful!!!

  • @JohnChaplin
    @JohnChaplin 4 роки тому

    this guy is so good

  • @lanepicturecompany
    @lanepicturecompany 4 роки тому

    Great tut! Super helpful! Charge your mice, folks.

  • @EducationalTheatre
    @EducationalTheatre 2 роки тому +1

    at the beginning i thought it was ad and looking for skip but see its an original video not an ads 🤣

  • @twentytwoalchemyhq7027
    @twentytwoalchemyhq7027 3 роки тому

    Great stuff

  • @jamesbaduor5194
    @jamesbaduor5194 4 роки тому +2

    Yep, best tuts

  • @JoshSmith-xm4gz
    @JoshSmith-xm4gz 2 роки тому

    Great videos

  • @bidecui
    @bidecui 4 роки тому

    Love webflow now!

  • @jaztingaming5757
    @jaztingaming5757 4 роки тому

    great tutorial

  • @RandleMcMurphy123
    @RandleMcMurphy123 4 роки тому +30

    I'm only here for the jokes.

  • @ilovelifeqqq
    @ilovelifeqqq Рік тому

    i like this man

  • @yosoydavide
    @yosoydavide 3 роки тому

    OMG I learned.

  • @2mbst1
    @2mbst1 4 роки тому +1

    Love the jokes! Being a frontend-dev looking into this for an upcoming project, I enjoy this thoroughly. Also absolutely digging the approach webflow takes and how it's basically "just" 100% frontend development, but without code.

  • @tombreen7533
    @tombreen7533 3 роки тому

    Fantastic!

  • @jobienify
    @jobienify 8 місяців тому

    @webflow All your tutorials are great, I have just had one problem with the navbar. The position is fixed but all other elements on the page seem to go on top of the nav when scrolling, rather than behind. Eventually I would like to reduce the opacity to my nav bar, but even with full opacity the other elements appear on top when scrolling. Is there a setting somewhere I’m missing ?

  • @novabraden8646
    @novabraden8646 Рік тому

    Hello, Great Video But can the dropdown text be linked to a page and then also have the dropdown links too. Thank you for your prompt response.

    • @Webflow
      @Webflow  Рік тому

      You can wrap the dropdown label with a link block, set the dropdown to open on hover, then set your link for the text label link: share.getcloudapp.com/X6u7EbbN
      Hope this helps :)

  • @ShariffBroadcast
    @ShariffBroadcast 2 роки тому

    Dylan was completely flabbergasted ☠

  • @mahmoudkhodeir531
    @mahmoudkhodeir531 4 роки тому

    thank you so much

  • @davidw717
    @davidw717 4 роки тому +1

    But... What about animations/motion effects ? ... Say on the Nav bar once clicked or the fixed menu once scrolling?

  • @christopherdockens8643
    @christopherdockens8643 4 роки тому

    Great video, but can you do another one that adds how the dropdown was created, that is the primary reason I wanted to watch this one. Thanks.

    • @Webflow
      @Webflow  4 роки тому +1

      Hi, Christopher. The Dropdown element is added from the Add panel at 7:34 - is this what you're referring to or something else? That Dropdown element is added and styled from scratch in this video, so we'd like to better understand what you're looking to achieve so we can help out!

  • @buladice_04
    @buladice_04 2 роки тому

    your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou

    • @Webflow
      @Webflow  2 роки тому

      If you can, please post your question on our community forum at discourse.webflow.com and be sure to also include your project's share link in your post.
      Here is how to get your project's share link:
      university.webflow.com/lesson/share-your-project-and-invite-collaborators

  • @HeatherDuarte-p8s
    @HeatherDuarte-p8s 7 місяців тому

    I'm using a template that has a home tab with three different options (Home A, Home B, and Home C), and I just want to utilize Home C as my main home. How do I hide the other home pages? I don't want them showing when I publish my website. Is there a video on this? I tried hiding, but it hides the whole button in the Navbar.

  • @musicxsam1
    @musicxsam1 4 роки тому

    At this point if Webflow releases a User Manual of 1000+ pages, I wont mind reading it thru! 😂

  • @DesignDen673
    @DesignDen673 2 роки тому

    Is there a way to clone the initial state of the project to able to work on the lesson? As a beginner it took me 45 mins to figure out how to create that bg hero shot before I could learn how to place the navbaar.

    • @Webflow
      @Webflow  2 роки тому

      Here are some projects tagged with "sticky nav" that you may be able to clone: webflow.com/made-in-webflow/popular?page=1&search=sticky%20nav
      Hope this helps :)

  • @brandonmosco8365
    @brandonmosco8365 4 роки тому +3

    Consuming a Nav bar! Lol!!!

  • @hendrikkoopmans8469
    @hendrikkoopmans8469 3 роки тому

    @webflow How can I move sticky nav within a hero overlay to the top of the screen?

  • @1filmpjesmaken
    @1filmpjesmaken 2 роки тому

    Nice video! I want to have a logo and a button (instead of full navbar). What is the best method to achieve it? Should I still use navbar from the Components list, or should I build it from scratch and just hold the logo (image element) and a button in a div block as a wrapper? Thank you so much

    • @Webflow
      @Webflow  2 роки тому +1

      You can go with either route. Build it from scratch or use the navbar component and delete elements you do not need.

  • @bililancun8867
    @bililancun8867 4 роки тому

    can you build and publish your own website for free if you already have domain or you have to pay for one of the plans?

  • @einarmb
    @einarmb 4 роки тому +1

    Is there a way to animate the dropdown itself? For instance have the dropdown elements fade in, or move?

    • @SeptemRoptem
      @SeptemRoptem 2 роки тому

      yes, you can do that. Look up tutorial you'll find something.

  • @egnmic001
    @egnmic001 2 роки тому

    The dropdown text color doesn't obey the class in practise (unlike in this video)... @Webflow can you please help?

  • @mrwongus
    @mrwongus 4 роки тому

    How about a drowdown nested in another dropdown and wanting the nested to dropdown on the left or right side? As default they just dropdown inside each other.

  • @QuantumKayos
    @QuantumKayos 2 роки тому

    How do i add a little effect when someone hovers over it though? like an underline or something to the text? since nothing happens when you just put one down.
    I have a different menu bar that does have that, but then wont create a hamburger menu for smaller devices... :L

    • @Webflow
      @Webflow  2 роки тому

      To add an effect on hover, select the link and change the state in the Style Panel to Hover. Now any design changes will only be applied to the hover state. Check out this article on using states in Webflow. university.webflow.com/lesson/states

  • @toby-o-rink
    @toby-o-rink 2 роки тому

    Can I add a third menu like a filter under the submenu?

    • @Webflow
      @Webflow  2 роки тому +1

      Yes. You can add a dropdown menu within another dropdown menu.

    • @toby-o-rink
      @toby-o-rink 2 роки тому

      @@Webflow OK. And I want to place a store cart in the main menu on the far right. But Webflow does not allow this. Why?

  • @RD-jr8nv
    @RD-jr8nv 4 роки тому

    Never looked at a hamburger like that before. Bun - Protein - Bun. Cheers

  • @tylervelasquez5639
    @tylervelasquez5639 Рік тому

    I wanna consume a nav bar rn lolol

  • @hamzaomenxx1299
    @hamzaomenxx1299 2 роки тому

    why there is no navbar-setting in my website, did you guys changed its place or what?

    • @Webflow
      @Webflow  2 роки тому

      The navbar element setting can be found at the top right. For more information, please read this article: university.webflow.com/lesson/navbar#style-a-navbar
      Hope this helps 😀

  • @truthseeker1278
    @truthseeker1278 2 роки тому

    I must be dumb, but did not understand any difference between sticky and fixed. In my case the rest of the content overflowes that bar, wether it is set on sticky or fixed. And I did uncheck the eye for overflowing view. What do I do wrong??

    • @Webflow
      @Webflow  2 роки тому +1

      First, you're not dumb. Everyone is learning something new at any given moment :)
      Second, sticky is a CSS property that allows you to "fix" the element to a parent element that has a CSS position set to relative.
      Fixed all you to "fix" or "pin" the element to the HTML body tag and ignores any parent element.

  • @rukkay3708
    @rukkay3708 4 роки тому

    Can someone please help me!!! Im a complete newbie.. How can I have some nav links at the far right of the page and some links at the far left next to the brand element without ruining the links in the dropdown menu?

    • @Webflow
      @Webflow  4 роки тому

      Hi, Ruk Kay! If you post on forum.webflow.com, you can share your project's read-only link and the folks over there can look at your project! It's hard to diagnose without digging in. If the functionality isn't working as expected, you can also reach out to support@webflow.com, but the Webflow Forum is usually a good bet!

  • @kikal85
    @kikal85 3 роки тому

    Does anyone know why my dropdown menu from the navigation button hides below the content of the page? thanks

    • @Webflow
      @Webflow  3 роки тому

      Hi Enrique! Great question!
      The best place to get help with design related questions is on the Webflow Forum:
      forum.webflow.com/
      Please post your question there along with your Read-Only link for your Webflow site so that our community and team can help. Thanks in advance!

    • @coffeefps
      @coffeefps 3 роки тому +1

      try playing around with the z-index

  • @kurtmiller5194
    @kurtmiller5194 2 роки тому

    How did you guys get John Mulaney to do your tutorial videos?

  • @KarimElkharraz
    @KarimElkharraz 4 роки тому

    u didnt talk about reuse the navbar and mkae just little changes with effect the source

  • @jimmehgakou3099
    @jimmehgakou3099 4 роки тому

    What is google search for?

  • @mattm7426
    @mattm7426 9 місяців тому

    When I create a class it doesnt save

  • @plinyelder8156
    @plinyelder8156 4 роки тому

    Sticky navbar doesn't collapse in mobile mode.

  • @entertainmentyoutube3606
    @entertainmentyoutube3606 Рік тому

    sadly the drop down doesnt work in the resposive breakdowns

  • @denzarutsky7805
    @denzarutsky7805 3 роки тому

    Mobile menu not closing on external/internal link

    • @Webflow
      @Webflow  3 роки тому

      Hey Den, if possible, it would helpful for you to post this onto our forum so that we and our community can solve this with you. forum.webflow.com

  • @ElBeeEss
    @ElBeeEss 4 роки тому

    Wait. I'm feeling dim here. I didn't understand the difference between fixed and sticky. They both looked the same to me!

    • @Webflow
      @Webflow  4 роки тому +5

      Hi, Sharp Words! The distinction can be a bit tricky. An element set to fixed position doesn't take up any space on the page. An element set to sticky still takes up space, and pushes other elements out of the way. A fixed navbar, if placed at the top of a page that has a section underneath, will overlap that section when the page is loaded (the section is tucked underneath the navbar). But a sticky navbar, if placed a the top of the same page, will push down the page's first section (the section starts after the navbar, and is pushed down so the two elements don't intersect when the page is loaded). A great way to visualize this is to toggle between fixed and sticky on an element at the top of the page while observing how it affects page content underneath it.

    • @ElBeeEss
      @ElBeeEss 4 роки тому +1

      @@Webflow Three things... 1: Thank you for the very enlightening answer. Now I get it! 2: I can't believe you're working Sunday answering random stupid people. 3: I can't believe you answered so quickly! Thank you xxx

  • @SajibITBD
    @SajibITBD 2 роки тому

    What about mega menu?

    • @Webflow
      @Webflow  2 роки тому

      This past live stream may help you with this: ua-cam.com/video/MSZPgv-pZwc/v-deo.html

  • @jimmehgakou3099
    @jimmehgakou3099 4 роки тому +2

    there's almost everything on your chanel lmao

  • @mericsso
    @mericsso 4 роки тому +1

    Different clothes! hahaha