Customizing Navbar and Dropdown components in Webflow

[Music] so [Music] you [Music] [Music] [Music] foreign [Music] so [Music] so [Music] so [Music] do [Music] [Music] [Applause] so [Applause] [Music] hello yep we're here better yeah hey everyone welcome to another saturday welcome to the pixel geek live stream thank you for joining me um yeah again i just tweeted like a couple minutes ago it still kind of makes me feel happy grateful in all the feels that more than one person would open their saturday two hours out of their weekend to see me geek out about a piece of software still you know wow so for everyone who's in the live chat right now and everyone who's watching recording thank you thank you i'm super grateful uh all right so speaking of live chat who's in the live chat right now first point first one in the door uh ayush welcome back keith already with a suggestion or a question nelson please do a video on custom form submissions such as hide unused checkboxes from forms ah um yeah we can do that at the end of the stream i think so i mean it seems like a simple uh interaction to hide and to to hide and show a certain element yeah we can do that brandon what is up brandon is one of the a backline customer support uh specialist over at webflow colleague of mine uh we're the ones answering your tickets whenever it comes to like hey is this interaction really working or is this a bug like that's kind of like our deal what we do and yeah we do our best to try to handle every ticket with uh the utmost care and uh personal touch to it um so yeah welcome brandon hope your weekend is doing yeah hope your weekend is doing well um junio is back ripple effect is back colleen wonderful wonderful moderator always helping out with the stream thank you so so much um and i just checked my phone because i got a notification thank you you uh again you've every week you're donating a cup of coffee to me but today it's not coffee it's water but thank you so so much speaking of which if you want to donate some coffee to support the stream put the link in chat uh let's see here eunice is back yes yes uh i would love to see your website uh again let's see any changes you made any progress yeah let me see sean is here i think you're new here hello from toronto yeah where are you all from i know colleen's from um uh florida brandon because i know him he's a colleague and he's on the east coast as well uh pittsburgh i think pittsburgh or philadelphia one of those uh and see eli's back pablo's back nasser is back n nori vision not nairo vision probably got that wrong so sorry from odessa ukraine lawazi we're live we live smash that like button people i'm not one of those youtubers who tell you to smash anything but if you enjoy the content please push on that like button as hard as you can all right uh thank you so much for being here luazi uh adil seems like you're new here too yes pittsburgh yes brandon's from pittsburgh there we go all right thank you all so so much ayus from india oh what time is it there oh man but uh thank you all so so much uh topic for today customizing navbar and drop down components in webflow so i noticed that a lot of people don't realize the power of the already uh set already styled webflow navbar component and the dropdown components um so i just want to make a video on on that and how you can customize it as much as you want uh and it's already responsive so you don't have to do much interactions you can actually add interactions on top of that which is pretty cool uh not a lot of people realize that so we're gonna get into that today and yes a deal signed uh um donated to the uh to my coffee page and he's the 100th person to do that so thank you so much adil you rock baelix welcome i think you're new here so thank you so much for chiming in in the live stream and if uh you like to lurk and you don't like to chat in the live chat room that's totally fine i get it uh thank you so much for watching all right now before we get into the nav bars and drop-downs couple announcements about the pixel geek community the pixel geek visual dev course live dev course uh inspired by the webflow camp no code that i helped hosted um it's happening when well we're still organizing our thoughts uh me and the rest of the volunteers are gonna we're trying to get together for our first meeting about it and organize a schedule that makes sense so thank you again to eric colleen rock sarah and lily thank you all so much for helping me out there the pixel geek community guess what we got a domain name finally it's real pixel geek dot community uh let me put it in chat copy it and paste it in chat right now yes oh it's live it's still coming soon page so the community isn't live live the community website isn't live but it's getting there um yeah so if you want to sign up for the email list so i can send you updates as we start to get it done um i started to go into mailchimp and just create one a basic email template and my wife was looking at my screen and she was like do you want me to design you a template and like okay if you have time because i'm not a designer but she's looking at me like oh so she's gonna help brand it up for me and oh man super grateful i mean she's the one who created that right there she created that logo wait i can't point there there she created the logo she created the color scheme and i'm like ah so super super grateful i have a wife that's super creative all right so sign up uh we already oh speaking of signups the first day i posted the um posted the webflow.io link saying hey sign up for so when we open on so i can send you updates 15 people signed up and i was like yay cool and i was happy with that 15. you know i was over the world of 15. and then i was like the next day i saw how many people signed up and it was over a hundred and all i yelled outside of my window because my wife was playing uh with nova outside and i yelled it's over a hundred because i was like oh crap this is real now this i i guess we have to go full force on it i did not expect over a hundred in a day okay so we're over we're at um [Music] i think around 160 signed up for the email list and i'm like oof wow so thank you all for your support and we're gonna get it done it's going to open right i promise it will open and speaking of which i want this to be a community resource right and so if you have a video a youtube video that you have taught about no code anything in the no code space please post it in that link there's a forum i posted um in the chat room go there submit that form and uh yeah we'll get that into our catalog bonus points if it's taught in a different language so so far i got submissions um obviously in english but also in french hebrew and spanish so if you have another language that you're teaching in please submit that because yes people can use the auto translate in youtube but it's easier to learn in your native language like there's a lot of jokes that probably doesn't translate well when you're watching um a webflow university tutorial video and i know it's very funny and it's it makes me laugh because english is my native language um is my first language but i'm wondering do those jokes really fly in other languages so yeah submit yours and what else if you another thing if you are uh here i'm gonna put in chat too also s submit to the community um i'm starting a showcase of projects so if you have something cool that you've built in webflow post it there as well post it there right um yeah so i have so many ideas for the the pixel geek community that i'm pouring into this website and each time i get a new idea i'm so excited and i'm like i gotta jot that down or i gotta build it now and so yeah it's coming soon i've been using webflow member stack circle for the community chat board zapier and jet boost so um yeah this is gonna be cool this is gonna be fun so when will it open soon i already have a planned date but i want to make sure that something happens before we open it all right um yeah lastly at the end of the year uh i would like to have a community site awards where people can submit their projects for free you don't have to pay to get your project uh submitted but um finalists who get to the findings or something i want to do a thing where each submission who gets to the finals gets reviewed a video review from each of these judges and i'm going to ask people in my network from i want to get a diverse set of judges who are from different no code communities and have different skill sets so you can get a very very honest review will there be will there be like set winners with prizes i don't know maybe i can find some sponsorships or something like that uh but i think it'd be really cool all right that's it for community announcements okay let's see here um i already got some questions keith oh no so nasser which is which way is good to design your website on tools such as sketch figma adobe xd shift it to webflow or start with webflow directly a good question yeah let me start with that question nasser uh it depends you know how comfortable do you feel inside of webflow there are people who do both i mean there's people who like to do one way and people who like to do another way so there's people who aren't uh really really comfortable designing directly in web flow because it's all about thinking in web standards um will feel restricted with their creativity and i get it because if you have an idea and you want to get it down right away on webflow you have to do all this css stuff and all this positioning and whatnot just to make your idea visible just executing that idea but it's faster if you do sketch figma or adobe xd so you can just see it from a high high level point of view obviously those are more um tools just to do a big and good a sandwich my huge i'll make it cold all right thank you he's he's getting my coffee sorry that was my wife oh eunes thank you so much for the coffee donation speaking of wait my macbook there he goes sorry that was my wife she was asking what i want for coffee anyways yeah so uh from a high level like a high fidelity mock and then once you're okay with that uh design then you put it into webflow so either way works however comfortable you feel if one way doesn't feel good then do the other way but yeah it's all up to you um all right cool and hold on brandon wants a sandwich too all right we'll ship you a sandwich brandon what oh is it dry thank you thanks okay gorgeous gorgeous all right thank you okay we'll ship you the sandwich all right um yeah do you think it's a good practice to start by designing style guide first in webflow before starting your website yeah um that's still a struggle for me and that's one of the dream big week um projects that i also um helped out with um wouldn't it be cool to have a style guide set up for you already inside of webflow when you start a new project so uh yeah um okay here we go let's get into webflow let's see oh it's already 10 21 yeah so 10 21 yeah we're still on time all right so if you have any other questions that's not part of today's uh live stream topic colleen will help jot it down and i will answer it after the main topic so let's go to my screen and there we go all right so this is my personal site but um i'm just using this just as a sandbox because i already have colors in it but um yeah nav bar so in the add elements panel at the very very bottom we have a bunch of these components now these components are pre-styled pre-coded uh by the webflow engineers and so all the things you would need to do to make a drop down a background video a light box or a navbar happen there's code already in there for you so you don't have to write the css you don't have to write the javascript to make it happen you don't have to make it responsive it's already done for you so this is really cool so i'm going to drag the nav bar into my page and there we go now a lot of people think that this nav bar because it's pre-styled and pre-coded by webflow is restricting to me it's not it's super flexible and it gets the job done faster right now here's one of the things i usually do whenever i put in a navbar webflow already has all these elements for you you have the container you have a place to put your logo and it's also a link so it goes you can direct it to your home page you already have a nav menu which has your nav links and then you have your hamburger menu or icon yeah i mean hamburger menu button with the hamburger icon in there all right so what i usually do is i get rid of this container because this container is set to 960 width that's too small especially nowadays when people have wide or even ultra wide screens right we have a lot more room to play with so what i do is i go to add elements panel i drag in a div block into my nav bar in the same uh indentation of the container and i put the all the elements i take it out of the container and i put it in the nav bar and how i'm doing this real fast let me undo is i'm dragging the brand into the div block and then i move to the right see what i did there so let me do it again i'm going to drag up and to the right and then drag up and to the right up into the right oop hello uh now you're distracting me i'm already sitting down okay bye-bye hello okay bye-bye thank you bye-bye bye-bye okay so after that i delete the container okay and now if you look the navbar is super wide it goes from edge to edge and um now i get to play with how wide this is so this div block i'm going to name it nav container and i'm going to give it a width uh or sorry a max width of say 11 40. okay oops 11 40. and then see how it cuts off right here now i want to center it and to center it i need to put auto margin auto on both sides all right but the shortcut to that is this boom right now if you're not if you if you don't understand what margin auto means let me explain it real quick so i'm going to delete that auto i'm going to delete that auto now because web design everything goes starts from the left everything pushes to the left kind of like a google doc or a microsoft word you're typing and you're starting from the left so top left and then you press return and then it's uh goes down but it still starts on the left um when you press auto right here on the left what it's actually doing is saying hey on the left side push it as far as you can to the right right and so if i add auto to the right side now you have a competitor saying hey push this all the way to the left and so both of them are pushing against each other and when they push against each other it makes the thing go to the center so that's what margin auto on both sides does one's pushing to the right another is pushing to the left and so they meet at the middle there you go nova distractions are beautiful yes they are all right so that's that now let's go ahead and let's put my logo in here so i'm gonna just find my logo there we go i'm gonna put that in there just for now and i'm going to take this brand i'm going to give it a width of a 75 pixels oh no lower yeah let me go we'll do 35 all right now if you notice it looks this looks weird this looks weird because it's it's hugging the top but these are all in the center vertically centered they have the exact same space at the top and the bottom okay now here's where webflow has pre-styled css so if i click on any of these nav links webflow doesn't tell you um loudly enough in my opinion but there's already padding right here so if i scroll in look see there's already pixels padding on all sides however i didn't do that webflow did that so these in my opinion should be already blue okay to say hey we've already styled it for you so i can go ahead and change this if i want by holding shift and then playing around with the numbers myself you know but i'm going to leave it as 20. i'm going to leave it as 20 for now all right same um also with all of these nav links i'm sorry the nav menu this nav menu right here that wraps all the nav links this too has pre-styled css and you won't be able to see it unless you turn on or open the float and clear so right here it has a float right so this is what's pushing it to the right now floats is that old-school css that has been here since and when did i first learn about floats 2004 i think yeah oh it's very old um but now we have this new hotness called flexbox right so what i usually do with my nav menus is i make sure to tell it don't float we don't need that that's old we don't want that when i do don't float everything pushes to the left that's what i want okay and also this brand right here this also has a float and this is what's pushing it to the left but i don't want to use that i want to use flexbox so i need to set this to float none okay oof i need to fix my logo real quick get this and set this width to 100. oh that's not what i want why what why do i have to set i'm what hold on okay do i have to set this as 35 pixels i guess so i thought this would take a hundred percent width of whatever this is oh there it is so see how this brand is going all the way 100 it's because this has a display in line which is odd but if i do display block there we go then it shrinks all the way back because i've set the width to 35. that was weird now if i remove the class here there we go all right so this brand needed to be display block that way i can set a width and also i turned off my float cool so one more thing this nav this hamburger menu button again is already pre-styled it has freestyled uh padding of 18 and it's float to the right i don't want that okay so what i'm doing is saying thank you webflow for pre-styling everything for me to get me going but now i want to customize it so i'm going to remove some of the things you already gave me all right and also this menu button is pre-styled to display none because it will only show up in mobile display in the mobile break points and what i mean by that is these right here tablet on down okay so we have that now let's go ahead and center these vertically okay so they're all centered vertically and then have my logo on the left and push my nav menu to the right yeah i could have used floats i could have left it as floats but i feel like flexbox is the new css that um lets me do things faster all right so this nav container what i can do is set it to flex and i want the align everything to be centered vertically and then i want to push everything to the edges okay and there we go all right now it may seem like a roundabout way to get this done but this is more flex a bull i had to all right so let me do it one more time so display flex let me delete these real quick all right so what i did was display flex align them vertically centered and then push them to the left and right cool all right and again like i did with my own personal site you can take this nav bar and say hey i want it to be a vertical left uh nav bar um in in yeah and i showed that in a previous uh video i already have a stream clip of that so check the youtube channel but yeah you can do a lot with this okay all right next thing i wanted to show you is boom all right so right here at this break point this nav container could use some spacing on this on the edges so i'm going to hold alt no oh yeah i'm going to hold option and then get both sides to be 20 20 pixels on each side so that way it doesn't hug the edge okay and thank you so much colleen and brandon for answering questions you rock all right so see this menu button right here it's display block it's pre-styled display block because it only shows up in smaller break points so thank you webflow and also what's pre-styled is if i click on open menu so i went to element settings open menu i have this so it's already mobile ready i didn't have to do this javascript i don't have i didn't have to do the css styling it's already done for me all right but let's take this even further we can style upon this okay so i'm going to click open menu and so this nav menu 2 right here i can style it and say let's make it a height let's take over the whole page 100 vh right so if i preview it takes up the whole it covers everything pretty cool huh so yeah you can style it however you want let's let's keep going with this um the nav links i'm going to change the font size okay that's weird why did it do that look at this i'm trying to undo and that's weird i just changed the font size and then it centered itself do i have text centering no i don't all right well we'll keep moving well maybe i want it centered let's say it's centered all right so again let's go ahead and make these bigger because it's for mobile make it bold that's weird that height has null huh all right well i'm going to do 1.3 dash okay there we go and i'm going to apply this same class name nav link 2 to the others okay weird nope not that one have link 2. okay now they're all in one row maybe i have to do display block ah there we go so display block makes them take their own row cool um one thing to also note is because this nav menu is set to 100 vh i have a little bit of room so if you look down here my scroll bar 100 vh plus a couple of pixels and so it's making me have some scrolling see that what if i don't want that i don't want that i don't want that so css calc check this out i'm going to oops i'm going to here's a pro tip i'm going to drag in an embed to the very top and let's do some low code style so we're telling the browser hey this is custom css and this is what's it nav menu2 um dot which is the class name nav dash menu two height calc so we're telling css to calculate what is a hundred vh minus and the height of a default webflow navbar is 60 pixels how do i know that i've been using webflow for way too long so 100 vh minus 60 pixels and then i end it with a semicolon and a curvy brace save and close and boom look no more scroll roll is gone yay so that means this nav bar won't have that scroll so open it no scroll and i'm yeah see i'm scrolling up and down nothing's happening cool all right so take that code snippet and i'll put that code snippet in um uh in the youtube description after we're done cool um okay that's done all right so let's take this even further we have an animation of a drawer opening and closing wouldn't it be cool if we had a staggered load effect for each of the nav links okay wait okay that's weird notice how it says nav link here and it says nav link too but these aren't all right i'm just gonna keep moving on great so let's add an interaction to it so a lot of people don't know that you can add interactions to your nav bars all right so if you click on uh this one no you have to click on the navbar yeah so if you click on navbar right here and then go to the very top right interactions and add an element trigger you have this little nifty thing navbar opens so you can animate something when the nav bar opens or closes so click that let's go ahead and set an animation we're gonna start a custom animation and press plus and uh nav bar open so i'm gonna name my new animation nav bar open and what i'm going to target is navlink2 and i go back here press the plus sign and now i have to imagine because the the drawer the nav bar isn't open the nav menu isn't open yet so i have to imagine what do i want the links to look like before the navbar opens well what i want is them to be pushed to the left of where they are right now i want them to push to the left and i want them to have opacity zero and then when they come in i want them to one at a time go back to their original spot and opacity 100 so they have a slide in fade effect right so let's move this and so all of the nav links anyone with the nav link 2 will start negative 30 pixels so that's pushing it to the left and yeah that's it and i'm going to set this as initial state weird oh yeah okay i want to set it as initial state because when the page first loads this is what i want all of them to do all right on top of that i'm going to press plus and i want them to have opacity of zero cool actually i'm gonna rename this to wait should i rename it wait no no i'm gonna leave it as this cool wait thinking oh yeah i need i need two different timelines so this one i need to set it as um initial state because i need each of the nav links to come in at different times so initial state done all right cool that one's done now because i want a staggered load effect i need to give each of these a combo class so i'm going to go to this nav link the first nav link and give it a combo class of like one this one obviously will be two this one will be three so i gave them each a combo class because i want them to come in one at a time right i'm gonna go back to my navbar go to interactions and let's add on top of that another navbar opens element trigger so you can add as many triggers as you want it's it's up to you you can go crazy but again with great power comes great responsibility make sure you optimize everything make sure things don't make your users web web experience very laggy right moving on um whoa whoa whoa scott and eunice or no yes scott and valerie thank you so much for the coffee oh do you rock all right so i'm going to create another custom animation press plus and this one is nav bar nav bar opens and now let's set each one i'm going to go to nav link one press plus and now i'm going to move each one to their original spot so this one's gonna go zero it's gonna have an easing of let's say out quart and yeah quart and then plus opacity out court opacity oops opacity 100 yeah that's what i want and now rinse and repeat so the fastest way to do rinse and repeat is just it's just uh select both i've selected both by clicking on the first one and holding shift and clicking on the second one right click duplicate and i'm gonna drag it in here with those two and i'm going to right click again on those change target and notice how i have this pink bar at the bottom this says uh select an element on campus so this means i can change its changing element mode i'm going to go here to my uh navigator and click on the second one okay so now that i click on the second one there we go now i'm affecting nav link to combo class two right and i'm gonna set a delay for this to be 0.2 okay so the first one happens and then 0.2 seconds after that one happens the second one uh does its animation now rinse and repeat right click duplicate drag it in right click change target the third one all right now my classes is third and i'm going to set a delay to 0.4 instead of 0.2 so now we have our staggered effect press done all right so one more thing when the menu closes we need to reset we need to set those links back to where they were i'm going to press plus nav bar closes plus and oops sorry i'm going to select my nav link plus move and i'm going to make sure that it's affecting nav link 2. i want all the nav links to reset not just that one with the combo class and i'm going to do the same thing out court and set the move back to negative 30 30. negative 30 pixels press plus opacity back to zero percent and we're done so again so much flexibility because you can put interactions on top of the pre-styled pre-coded pre-everything uh webflow component so watch what happens awesome it didn't work for the first one why why is this refresh why is that buggy brandon why doesn't this how see i put navlink2 there but it's not showing up here all right so i'm gonna do i'm gonna delete this one you're being mean to me right now copy paste take this and call it home i'm gonna give you a combo class of one how come this nav oh oh because of yeah okay i'll fix that anyways all right let's try this again still not working i wonder why let me check my initial states all nav okay that one works okay here navbar opens see how this one is blank i think that's a bug so let me right click change target this one okay now it should be fixed this should be more of a delay let's fix that so this one should be a delay of because it takes when you open up the nav bar there's a 400 milliseconds or 0.4 seconds of duration to make the animation happen so we should wait 0.4 seconds before the first animation happens so let me go back to my nav bar so this one we're going to set the delay down here to 0.4 then this one we're going to add 2 to that so 0.6 and then this one we're going to say 0.8 and now we should have the desired effect cool it's a bit slow so let's speed it up all of these will have a duration of 0.2 so it's super fast oh maybe the delay is bad for e how come it's so all right let's do point oh yeah just add point zero five to each one that's faster there we go so i've set 0.4.45 and 0.5 there we go and then they reset let me come in there we go cool all right now before i get into the drop downs um let me fix that one thing if you notice look how big this is this nav bar the reason why is because nav 2 still is being affected by this cool css so let me show you how to find the breakpoint in webflow using code let me publish this real quick and go to the page and then i'll get to your question there okay so let me drag this in real quick there and let me inspect oh well let's inspect that right there so this is the code i was looking for all i have to do is just copy this which is at media so what this is saying is if it's a screen and it has a max width of 991 do this stuff all right so i'm going to copy that and i'm going to paste that here then i'm going to indent this tabs or spaces go end it with a curly brace and once i press save and closed fixed yay and this should have some space too cool so that navbar style that custom css only happens from 991 pixels down right so there you go animate right cool all right let me get the questions before we get into drop downs um if i miss any questions and again thank you so much colleen for jotting these down um uh harsh oh partial can we add gsap gsap animation library and webflow um i'm not familiar thank you for googling it um colleen is it let's see here javascript library well if it's javascript probably okay see you can add a cdn to it i mean sorry you can add it by using javascript um yeah if it's just a client-side then yeah you can add it i'll look into that maybe yeah yeah i'll look into that and see if that helps but yeah try it you can add custom code to your webflow site um here let me bring it up on the screen asap [Music] professional grade javascript animation for the modern web crazy fast compatible right cool get started right um so yeah so you can take this copy it and then put it into your custom code like that and then do what you need it looks like it's just you know javascript that you can copy and paste so that's pretty cool well that's the javascript what's the css look like yeah you can use it yeah you can totally use it all right good question all right next one um how anus and an s i'm so sorry don't clip that how how to design a controller's slider bar with percentages or words i've seen this happen uh did ask for example um i'm still even always okay how to design a controller slider bar with percentages or words um i need to find an example of it but it's it is possible there is some sort of javascript as you're dragging a circle on a track like for i don't know you've seen it on like mortgage websites or taxes or something that where the number you can slide it up and down um it's possible i need to find where i haven't done it myself but it's just javascript so yeah um here next uh pablo's question got answered thank you so much brandon uh jose hi nelson when i make the links in anchor point i can't figure out how to get the nav to close as if the link went to a separate page any advice question was geared more towards creating a full screen menu um um i let me try to do that after my next part because maybe i know what you're talking about but i don't know if i have the answer so we'll have to explore it together uh and joseph i appreciate you guys we appreciate you too all right all right cool let me get to my next part of my [Music] hold on i'm totally loving my setup right now i have a logitech keyboard and a logitech mouse that can go between my mac and my pc if i just go to a certain hotspot on my on my screens so i can switch between the two because before i was using two keyboards oh man that was tough all right so let's get to it all right so let's play around with drop-downs so again webflow has all these pre-styled things and so what i'm gonna do is drag a drop-down component and let's put that inside of a nav menu there right so we have this drop down we'll just name it drop down and so what this drop down has is a bunch of elements okay so you have the drop down itself but then you have the drop down toggle so this is the um actual hotspot the link the the thing that has the trigger effect so this already has um javascript on it so when you click on it it opens up your drop-down list so in your drop down toggle you have your icon and a text block and what those are is your down icon in your text block for the label of your drop down your drop down list obviously you can't see it yet because it's not open but it holds all of your drop down links and so if you're thinking of making a mega menu or something like that this is the component to use okay so this drop down right here if you go to the top right and click on element settings scroll down you have open menu so if you open it cool all right you also have a timer to close delay so you can say we'll delay it by 500 milliseconds okay so that's half a second and so it yeah i think so and so if i click on this and then click it again it took some time there's some lag to close it so i'm gonna click click again and then it's gone all right so there's that but i'm going to set this to zero because i want it to happen immediately you can also set this to open on hover if you want all right and it'll also close when you hover out right so what things can you customize with this well you can do the same thing that we've already set up for example if i go here and then click on plus we have drop down open so you can add those animations those same animations that we did before you can add it to a drop down so let's go ahead and do that i'm going to start animation custom animation um and i'm going to do navbar initial state but because these are different elements i need to duplicate this timeline okay this animation now that i've done that i want to make sure that these have a class name so i'm going to go back here to my drop down links go to my styles panel and notice i don't have a class name so i'm going to create one called uh drop down link two i'm gonna set that at that for each one so this will drop down link two combo class one drop down link two combo combo class two and then same thing here drop down link three right so i've set those up let me go back to my drop down right here animation let's go to navbar initial state 2. i'm going to rename this to drop down initial state select both of these right click change target and i'm going to click this one all right and i can just also change it here drop down link to that's what i want done right close that out and we're going to add another one drop down opens start animation and we're going to do navbar opens but i'm going to duplicate it from down here i duplicated it select it open it and let's change it to drop down opens and all i have to do is click on each one so those two change target choose the first one select these two change target and there we go boom faster faster faster done and now need to do menu closes and so what i can do is go down to navbar closes duplicate select it change the name to drop down closes select both of these and actually let me just yeah change it to drop down link to preview and there we go and notice how these are gone the reason why is because i have this nav bar i have this navbar interaction right here for the initial state i have that set to trigger on all um on all breakpoints so i'm going to turn it off for desktop and there we go now it's fixed we have that animation going and then we have this animation going there you go so yeah you can you can customize a lot with these components it's very flexible and uh yeah take these basics and do something crazy do something fun make your navbars do things that are that will delight these micro interactions really help with the user experience all right yeah that was a short one but yeah hopefully you guys um take those tips see um joseph here let's make this bigger uh hi nelson when i make the links and oh yeah let's do that okay make the links an anchor point okay so joseph what i'm thinking your question is that you have a drop down menu something right so let me set this up real quick for joseph i'm gonna add a section [Music] full section cool so so select enter this heading what what why isn't this centered okay well moving on let me set this up section one section two and section three all right so we're there one two three let's style this real quick cool all right so i'm guessing when i have a full screen menu not the standard menu or tablet a full screen menu is this a custom menu joseph like a custom menu so it's not the navbar component i mean i made a full screen menu but the menu don't close if the link oh okay okay okay yeah um [Music] let me make a custom navbar nav menu real quick how fast can i do it i don't know let's go um custom menu um we'll just use this image for now that'll be the open and close please add another div for an av container put this brand in there like this like that yeah no okay cool well let me hide this real quick boom all right so this is our custom one so if someone open someone clicks on this it'll open up our full screen menu so i'm gonna add another div and call it full screen menu and this one will be fixed full z index of something crazy uh flex center center and we're gonna give it that color and inside of here we'll have um another div and this one is going to be this uh we don't have to name it anything huh no no just put links so text link um custom a new link um we'll make it bold something like 36 oh what 36 0.3 dash no underline we'll make it white actually let's actually yeah we'll do we'll do 50 but on hover you do 100 and also let's go ahead at the opacity and so that way we have go the text link this should go to section one but each of them should be spaced out by 32 so one two three two nope three and so you hover each one of them all right so now we need to set each of our full sections to have an id so this is section one copy paste section two section three all right one two three and now for these i need to section one section to section three cool cool and so if you click on this it should close this and so what i want is each of these uh should have a mouse so this is the answer i think i think so each of these should have interaction on first click uh start animation plus and i'm to name it close custom menu and we're going to click on full screen menu and set this to display none right done done and for this brand right here in our custom menu this is what's going to open our full screen menu and so for this brand i'm going to create an element trigger mouse click custom animation plus then open custom menu the action is uh we need to set full screen menu to hide show and we're gonna set this one to flex right done and then let's go ahead and set the full screen menu to display none and so if i go to section two it doesn't work nice what did i miss oh i set the animation to this hold on oh okay so the last thing i need to do is close custom menu needs to happen not just on the element but on any element any element with a class name of custom menu link so clicking on any of these will make that animation happen so let me scroll up click on this go to section 3. boom yeah got it yeah hope that helps and like let's for one more thing custom custom menu set that to display fixed set it to the top and then there you go and it doesn't work oh this full screen okay that's why custom menu needs to have a z index of like one yeah click on that click on that boom done and you can do animations to make that drawer thing happen uh when it opens and closes but that's i'll leave that up to you cool all right more questions came in great question that was a good challenge also question at top from keith he added additional keith keith nelson sorry to be a pain what i meant is got 60 check boxes on oh 60 need to show only check boxes in the email sent site from my wife enough said okay [Music] um oof 60. can you show me are you allowed to show us show the community what you're working on uh put your read-only link in chat um and if you can't um just remove the dots in your url with space and then replace them with spaces and put it in chat and then colleen will send that to me um wait raymar posted something okay today okay um oh oh oh that's what you're talking about the percentages i need to figure that out okay cool um let's go to the next one mr anderson hello could you suggest cloud service to deploy my docker containers easiest way i have no idea that is not my that is not my skill set i'm sorry i can't answer that i've heard of these words i understand no no i've heard of these words but i don't understand these words when you say darker containers i'm like huh that's beyond me uh but thank you for being in the chat room today uh next question from eli is written tutorials also welcome to present on the pixel geek community site or only video tutorials so my thinking is uh this video tutorials helps people see what is happening it's it's i i learn that's what i like to learn through video tutorials but i don't mind submissions from um or written tutorials i actually have those in in the in the website and i wish i can show you the website i'm working on for the community but gotta keep keep it under wraps i wanna on a big unveiling uh but yes i'll make another form for written tutorials actually i should fix that form and have a drop down or the type of tutorial yeah i'll do that but for now eli if you have a written tutorial that uh you want to share with the community and put it into the community website yes please dm me that and i'll put it into the the resource catalog and uh speaking of which let me if you're just here let me put the links let me put the links to our community sites boom um oof delete that i wanted to space it out okay well i'll do one at a time then copy there we go we got a domain name yay if you have a video tutorial especially if it's in a different language than english submit that if you have any projects that you're proud of or you've seen on the internets that are no code submit that as well cool i've been working really really hard on on the website and i can't wait to show you all but it'll open when it opens uh already already know what's going to trigger the opening but i'm not going to tell you all but just know it's going to happen and i'm i'm so happy oh so happy to help you all uh rain ra ranny rainy ranny hi is it possible to make the mobile menu scrollable when the amount of links don't fit inside the viewport didn't make it work on a project it can uh let's do that let me let's leave that one off leave that one off and uh turn this back on uh let's see here let's open up this guy awesome so what rainy ranny sorry for the names uh he or she is asking there's too many of these ah what do i do good question what you can do is take your the thing that wraps around all of your menu links so this one is nav menu two i'm gonna select that one of my styles and i'm going to set the overflow auto and there we go that's it however you'll have double scroll bar you see here i have one for my page and then i have one for the navbar so um obviously you're going you're not going to see the scroll bars on a mobile device because both uh android and apple browsers they don't show the nav bars right they kind of show them when you're scrolling but then they fade away when you're not right that's part of the base ui the base experience that both types of devices have but one way to make sure that people aren't scrolling in the background after they scroll down and watch my navbars okay watch them watch on this side okay watch how this one will go up and down once i get to the bottom of the nav bar scroll now the page scrolls if i scroll up then that one scrolls up scroll down and then see we don't want that to happen so how do we stop the the page be um below the nav bar the nav menu to stop scrolling so i've done this uh i've done a video about it before but i'm happy to show it to you again so what happens is let's go ahead and we have a class name of menu button so when someone clicks on the menu button set the body to have an overflow of hidden wait can you do that without code let me try it without code yeah let's see here nav let's add it to the nav bar right here um half bar opens i haven't done this before and maybe this is the cool no code way to do it oh you can't so what i was thinking is you select body and then you select um overflow hidden there's there's no option here to do overflow hidden so you need to code it all right so what we're going to do is when someone clicks on when someone clicks on menu button do a body overflow hidden okay and then when someone clicks on it again remove that overflow hidden make it overflow visible so we need to code that so what i'm going to do is put my custom code i need to do two things i need to create a new css class or body and say body tag dot um no scroll all right i'm gonna say overflow hidden and i'll put this um code in the youtube description as well and now i'm going to go here and add some javascript and say um i'm going to target my menu button and say on click do something all right and what is that something i'm gonna say um the body tag we're gonna add a class we're actually gonna toggle a class which is uh no scroll i think that's it so let's try it publish try it out oof why do i oh yeah because i have a bunch all right um let's go and inspect so we can do responsive mode push this to the right unexpected end of input i suck at coding i probably hold on well let's see here cool yeah i have this scroll but i'm still at section one so notice how i can scroll up and down actually let me get to the elements where's my body tag all right cool body tag so watch this right here body tag it's going to add it didn't i don't know what i'm doing why are you listening to me so simple it's probably in my other hold on let me see in my other code in my you're not save it hold on um let me delete all this save it into there okay save publish get back on my screen and designer okay cool i fixed the custom code issue cool there we go so body class has no scroll because i clicked on the menu if i click it again it goes away so i'm going to scroll up and down all right and now if i click on this and i scroll up and down and then i close this i'm still at section one so there we go i will share that code with you all later good question all right um update mr anderson it's all about deploying your web app but not only one instance web server there is few micro services connected with each other i need to deploy my cluster to cloud in some way i don't know which one will be easier better for my purposes i don't know what he's saying micro services cluster i don't know what these mean how we're gonna get this to brandon oh jesus there you go brandon if you're still here for you sir yeah i will eat it private i will describe it to you it's just a microwave sandwich from starbucks but donated by you all so thank you so much and uh for the for the coffee thank you all it just happened um well i'm checking my okay cool i'm caught up to today yeah sorry mr anderson i don't know what you're talking about uh pablo can't can't you set the menu container to auto instead of 100 v8 can you um doing it auto is auto makes the height collapse so i did a whole css uh heights video if you check it out on my on my channel it explains if you set it to auto it collapses going up so you actually have to push it now and you have to set a height an actual height to your divs you can't just leave it to auto um okay checking my stuff all right cool wow caught up with everything yeah i guess it's a simple stream a short stream cool yum loved it yay you're welcome brandon uh yeah so what else is up everyone first time we're like ahead of schedule by 30 minutes that's intense uh what do you want to learn next week uh yeah what should we learn next week i am here for you all notes yeah so [Music] if you want to learn something let me know but uh if not then we can end early i mean this is this is for you all i i want to make sure that you're all happy and having a good old time watching this weird stream of a geek who's geeking out about webflow but um yeah i mean we can just chit chat if you want i mean it's up to you let's see here how many people signed up nice at 179. 179 people in the pixel geek community awesome you all rock uh rainy please ajax page loader ajax page loader what do you mean a preloader or page transitions i'm gonna have to look up how to do ajax page loaders i think there's a way using um micah figured out a way there's a weird name for it i don't know why i'm thinking of like bethany or or brenda or i don't know brandon if you know what i'm talking about that micah made a tutorial on how to do page transitions with a javascript library uh eli accessibility next week oh okay yeah what kind of um accessibility because i'm still learning that yeah like arya attributes junior 3d oh yeah i'm actually doing a 3d presentation i haven't set up for it yet i'm not ready but i have to be ready by wednesday for the the virtual note what is it the virtual web flow webflow virtual ah webflow virtual tour yes so i'm actually doing a breakout session on wednesday doing the oh that's so cool look at this mouse my mouse cursor so um i'm doing something on on wednesday for austin yeah so i'm doing i'm presenting my talk is how to no no 3d creating 3d inside of webflow is easier than you think and it is um you just take a 2d object and make it 3d and boom done so i'm going to be wait why do we call it world tour oh okay well we added the word virtual okay so virtual world tour oh how to do 3d stuff yeah oh cool i love how diverse the speaker lineup is that's awesome yeah so cool things cool things are happening check it out and yeah cool so sign up for that if you haven't thanks for the link colleen brandon oh yeah you're doing one too but not till the 27th yeah okay cool so we'll i'll try to do i'll try to read up more on accessibility uh we'll do 3d and accessibility next week sounds like two completely different things but maybe we'll do it alright um but if that's it i hope you all learned something i hope you all enjoy your weekends and uh rainy i want to know if it's possible to navigate a site and only refreshing content inside a certain div yeah that's what that's what micah taught i need to find that what is it called it starts with a b man i find it real quick uh webflow forums mica um age transition barbara found it i remember trying this once and got frustrated i was like ah i can't do it but here i'll put this link in chat that was close didn't i did i say barbara oh no it's not even barbara it's barbara that was close um yeah so micah awesome guy in our education team um can do so if i go here yeah so it's possible so notice how the url changes at the top so it's possible so let me copy it in oh i totally forgot ripple effect are we doing the la ah i tried to do something new and i totally forgot i need to add that to my notes thank you ripple effect did anyone do last week's challenge of creating a card ui if so put your link in chat let's take a look at what you did so every week i need a new challenge oh i failed you all i wasn't ready for this ripple effect keeps keeping me accountable thank you so much uh yeah if you have a card ui that you've made inside of webflow let's take a look at it if you didn't i didn't either i'm sorry but i don't even have another challenge waiting for you um man i feel bad cards yes show your link and let's let's do another challenge let me look and dribble real quick while i'm waiting um actually duh makes sense we talked about nav bars let's see what you can do with what i've taught you today so next week bring over a uh a navbar all right bring a navbar to chat and let's see what you've created with today's tip all right thank you so much ripple effect i'm i'm going to add it to my notes right now um challenge uh nav bars and drop down right how come i can't make that bold there it goes all right cool so that's the next week but let's review ecommerce card in webflow i don't want to be the only one ripple effect i mean if you're the only one that i mean you're the one who got it done and i think that's super awesome but if you don't want to show it i don't want to force you but um you're awesome for doing it so uh oh you did it oh here we go i have the link let me go on my other computer uh live [Music] um and if you have any websites you want me to review that you're working on happy to do that as well but now we're looking at oh you even made it okay okay here we go you added drop downs to okay okay okay this this is cool let's fix it i think it's supposed to be in this break point there we go all right i got you i got you okay i asked i asked everyone last week to make one card but you did all of them so i think that's amazing like whoa you did them all okay so i wouldn't be i wouldn't be embarrassed i'd i'd be proud i'm actually proud of you that you did them all right so okay let's let's break this down so i'm guessing you used a well first i think you use grid on this for this overall layout uh second you've probably used flex inside of each of these and hold on let me go chat room real quick um layout is not good on big screen it's okay it's okay all right so you do did all of the cars so this is uh i use this as an example i didn't mean for everyone to recreate all of it but i mean if you learn something from this ripple effect if you learn something from this challenge that's the whole point it's not supposed to look exactly right it's not supposed to look good it helps you keep your chops keep you sharp with your webflow skills and um man you did a really well job is well or good both you've done awesome all right so let's see here i'm guessing flexbox for this yeah so there's some spacing issues okay see the fact that you can take a static mock and make it real is what i feel that is missing from a lot of these dribble shots you know it's like oh i made this okay cool and especially if they're listed under web design and it's a static mock then i'm like is it really a web design if you can't hover over stuff and see what happens is it really web design if i click on something and nothing happens so like this it's awesome that you went this far great great work so tell me what did you what did you learn ripple effect what did you learn from this experience from this um challenge he said uh i cheated in one car the payment bottom left is a design on figma but this isn't real it's an svg how dare you no it's okay you did you did well for all the other ones all right yeah what did you learn let me see if there's any other links no other links all right yeah again very proud that you've done it all but brandon you're on your way out thank you so much for helping to mod and answering people's questions you sir have a great weekend um yeah you have hover effects you have drop downs um i think you have your drop downs opposite yeah so you're sorry you're dropped drop shadows so i think it should be opposite it should be light uh on on normal and then on hover that's when it should get dark because if you if you're picking up something off the ground then there's more shadow to it you know whereas you put lay something flat on the ground it's less shadow so if you flip your box shadows you should be good i've been on i've only been working with webflow for about two two months and you already did this i can't wait to see what happens in three months four a year you're dude keep going keep going yeah keep challenging yourself uh i hope to see your next challenge navbars but yeah so anyone else who wants to do the challenge navbar take the navbar component break it apart put it back together and see what you come up with and bring it next saturday right um is there anything else i'm missing uh lowazi cool animation on the youtube like button check it out not sure what you mean um randy thanks but unfortunately it's not what i meant i wish to reload the headers on page when browsing site can't find a solution not sure what you mean by that uh if you can give me a an example uh let me know but you and your v hey no it's you who's taking the time to to learn and apply so great job ripple so we'll end this stream now um and oh wait update i'm lazy waiting for link yeah uh wazi if you want to bring your link next week let me know but yeah i'm just going to end it today if i can play music at the same time cool yeah i got the music going all right thank you all so so much uh for being here spending two hours of your weekend with me i will see you next time make those nav bars i want to see what you create challenge yourself learn something new every day that's all i'm asking even if it's like hey i learned how to how to drag a button onto the canvas that's a lot right double click on that button see what happens create a hover effect if possible do something new every day uh i will see you next week saturday at 10 a.m pacific time uh if you haven't subscribed go ahead and do so thank you all so much again to uh i need to look at my who's it valerie scott uh ripple effect i think in in colleen for applying today's coffee for me thank you all so much for supporting the channel i will see you in the pixel geek community pixelgeek dot community sign up now yes i will send out details as soon as they're ready but super excited i'll see you guys next weekend and as always make the web beautiful together see ya [Music] [Music] [Music] [Music] [Applause] [Music] you

Channel: pixelgeek

Views: 4,896

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek

Id: 9ny5n_U89N0

Length: 106min 51sec (6411 seconds)

Published: Sat Aug 15 2020