Building a mega menu in Webflow

[Music] [Music] you [Music] [Music] [Music] [Music] [Music] you alright hey everyone welcome to another web flow livestream I am your host Nelson thank you for joining me this week this is episode 152 we're going to learn how to create a mega menu inside of web flow now this is going to be a longer than usual stream because I think we're going well I don't think I know because I practice this that we're going to use some very advanced techniques and I'm not gonna use the pre-made nav bar component no I'm doing everything straight from scratch and just using divs link blocks and some very advanced techniques with interactions okay so with that being said um hate everyone in the live chat room if you're in the live chat room right now tell me where are you from you know I love I love the community I love how it's it's a global community that everyone helps each other out because you know everyone wants to show the power of web flow and how fun it is I mean it's it's like a playground for web designers you know you can do almost anything in and with the with the speed of of web flow it's just fun anyways where are you guys from where are you all from let's see here I think I saw so ok Norfolk UK Paul what's up Peter's here thank you and whoever is in here who's a mod thank you so so much for helping us out it looks like Randy was the first one in live chat room welcome Chicago Florida India Serbia Seattle st. Louis Barcelona yes Romania Wow so many cool people and if you have enjoying the awesome community over at our forums forums at web flow comm check us out there join the community ask your questions there help people out over there it's it's so fun and fun fact most of the customer support team members actually started on the forums before becoming employees at web flow because we really really love how being you all out we love growing the community we love answering questions so yeah it's a it's a real real community yeah so if this is your first time being the live chat or you're watching a recording these streams happen at every Tuesday at 10 a.m. Pacific time and what we do is usually do some basic builds like I think last time what would what did we do oh yeah we did like an accordion type of hover effect we're doing we also do some advanced builds like pre loaders advanced interactions with timelines and animations whatnot were like today we're doing a mega menu from scratch and everything in between like speed is speed web design battles or interviews with the web flow employees or even you the community gets on the stream and shows us what you've learned or what you've created inside a web flow and you show us your process we call those the community spotlights so yeah a lot of things that we do on the stream so if you haven't subscribed to our YouTube channel yet please click that subscribe button youtube.com slash web flow and then the notification bell so every time we go live or when we upload a new education video you'll be the first one to know all right Thank You Meg for posting the forum link all right should we get started all right let me show you my screen you know also we're live streaming to both our web Facebook page and our Facebook group and through Twitter so I'm gonna try my best to keep track of all the chat rooms and in yeah so let me see if there's any people we'll see here no one commented in the Facebook groups okay cool and yeah okay cool all right let's go what's on my screen okay so I got this idea I was looking at boosted boards calm and I was like I haven't done a mega menu and web flow in a long time I haven't done a stream about it so let me look at some cool mega menus and I saw this one right here at first I was like oh yeah oh yeah this is easy this is easy and then as I started to practice over the weekend I was like okay this is pretty hard there's a lot going on that you don't realize until you start building it so let's break it down real quick okay so on hover you have this animation that shows that drops down the don't mega menu okay and then you have these two columns okay and the columns go all the way it goes to the edge of of the screen okay but it stays it stays within this container right here all the content stays within the container that's the same width as the Navajos the main nav bar up here right but then the container has two columns and so as I was building it I was like how do you even how do you get the two colors right and so yeah and then you notice that under the under the mega menu there's a black overlay that hides the rest of the content so your main focus is on the mega menu rather than the content below so there's a lot of little things happening including if I scroll over or hover over support the mega menu goes away all right so a lot a lot of things a lot of little things happening here I'm going to do my very best to explain as easily as possible how you can rebuild something like this and let me just go to my build right here and of course of course I did SpaceX if you haven't been watching the streams big fan big fan of SpaceX so that's why I use some of their stuff but if I hover over there yeah so I kind of did it okay so it looks simple but not really all right all right cool so I'm gonna just use this same project just in case I get lost or like I miss a step that I can just go back to this page okay I'm gonna try not to use or reuse any of the already set classes or the interactions that I've already set up for this okay so I'm just gonna start a new page workshop oh and by the way if you want a copy of this I'm gonna put it in my web flow I'm gonna put it in my web flow profile web flow comm slash pixel geek and you could clone it after our we're done with the stream you can clone it for free put it into your project I mean put it into your account for free and reverse-engineer it add on top of it or even you know copy and paste it to another project and use it yeah so free all right we already got some questions here andreas when will there be multi-language support soon I mean if you go back to the live Q&A with our CEO Vlad he answers that more clearly what dude is asking are you going to be remaking this menu for mobile as well I think it'll the stream will be too long for that because I haven't figured that out yet this is just for desktop but maybe in the future in a future stream we can make it mobile okay so let's go any other other questions and since this might go a little long I'm not sure if I'll have enough time for site reviews but I'll try to answer your questions as they come in all right so no questions from the Facebook peoples all right cool let's go all right so first thing I want to do first thing I want to do is drag in a basic div okay oh and let me use some hotkeys to let me use some hotkeys command e for the quick finder okay I'm gonna type in div press ENTER and there we go I'm going to press command enter so I get instead of clicking on this this opens up for me because I press command enter so another hard key for you and let's call this ws for workshop so I don't reuse any of the classes I've already made ws nav okay and for this nav I'm going to let's color it white okay so the background is gonna be white and I want this to be stick I want this to stick at the top and so I'm not gonna use sticky I'm gonna use fixed okay and push that to the top so that way it's aligning to the top and so if I ever scroll down it's always there with me okay all right and now let's go ahead and inside the ws now so there's nothing inside of it so let's go ahead and quick find it we'll add another div and yep there goes it added a div inside of my WS now and I'm gonna call this WS now container so this is the thing that's going to constrain the B nav to 1,100 max 1,100 pixels I'm gonna Center that okay you probably yeah you can't see what's going on but it stuff is happening I promise I'm adding CSS as you can see all right so let's go ahead and start adding the look all the navbar stuff like the logo in the text links okay and what I'm gonna do is let's go ahead and add a link block oh I forgot to use quick find again okay so a link block and I'm going to inside that link block I'm going to drag in a logo okay and now instead of sizing the logo I like to size the link block because the link block is the parent of this and this already has a max width of hundred percent so I'm gonna use the link block to to size down the logo okay so ws logo and let's I forgot what I use probably 150 we'll say 200 okay now I'm going to see here I'm going to give some padding because look at how close it is to the very top and to the very left of the canvas so I'm gonna hold shift and as I hold shift and drag in any of the padding areas it's gonna do that for all sides so I'm gonna say ten all right that's good okay so now we have the ws logo there so now we have to have our text links and so let's go ahead and command E and let's do a text link there we go and I'm gonna set this to display:inline-block okay call this WS WS nav link there we go remove that underlined and we want that color to be so that's how you have to override the color it usually goes blue and then the color picker says three three three but obviously it's not you just have to drag it around and then type in your color or choose your color and then it overrides it that's the way you do it with text links all right so let's see here I'm gonna use juice let's do a semi bulb all right and add some padding there we go and what we can do is copy and paste it a couple times something like that okay now I'm gonna name this one Falcon found Falcon 9 and this actually no Falcon and this one is Falcon heavy and then the rest I'll just say example okay let me delete these copy paste paste paste there we go all right so everything is squishing off to the left everything is like left aligned okay and I don't want that I want everything to be spaced nicely so what I can do is I'm gonna go to the parent container the nav container right here I'm gonna set this to flex okay and also in Allegan see notice that everything is nicely spaced okay and I'm going to let space in between and there we go nice okay now that that's done oh yeah there's a hover effect so let me go here and click on hover for the states and I think there's a background something like this okay let me save that oh wait I already saved the colors okay cool poof no no too dark something like this let me save that color cool or was it this oh it was okay let me delete this one then delete cool yay save swatches and so there we go all right so as you notice that the hover effect is very just on and off there is no timing so how to fix that to add more of a transition effect you scroll down and click on transitions and then I'm gonna choose background color protip never use all properties well I mean use all properties as a last resort we put that at the very bottom for a reason last resort for to keep things performant you actually have to choose the thing that you're changing okay that way CSS that doesn't have to really find through all the properties which one are you changing you're telling it directly hey I'm changing the background color and CSS is like okay thank you yeah computers talk well in my mind all right um let me add more padding to this there we go there we go cool all right so now we have that little there it's a transition effect rather than just on and off all right cool cool moving on any questions so far from okay cool right we're good we're good okay cool all right so this part is done okay so we're not using that navbar component we're going from scratch all right let's move on so we have that nav container and now I'm going to click here quick fine and put another div I typed in div and press ENTER there we go I'm gonna call this ws nav content wrapper okay so this is the thing that shows and hides okay this is the thing that shows and hides the actual drawer okay yeah so what I'm gonna do is I'm gonna set this overflow to hidden but I'm gonna keep the height as Auto for now okay and here's that trick for two different colors that I had to kind of kind of go with so I went to image gradient image and gradient for backgrounds I set the angle to 90 and for this side I went with the lighter color and then on this side I went to the darker color and obviously it's a straight line so how to do straight lines with gradients is simple you take both colors and set them to the same position 50% take this one 50% you got a straight line now obviously in the boosted boards it's not at 50% so I couldn't really I couldn't figure out okay how am i if you were thinkin responsively there's that line like how do you know where that line goes as far as percentages you don't so the actual content div will have the extension of these will have the extension of this left side color so that's the trick I learned okay we're dudes asking can't you just place two divs and set any using gradient I felt like this is easier and faster and I'll show you why but again there's so many different ways to get to an answer inside a in web design this is just my way that I found if you find a better way please let me know in the comments or in the forum post or on Twitter wherever and I want to learn from you because I'm not the master of web design okay so I'm I'm happy to learn better ways so let's keep going I'm gonna command E and I'm just gonna keep saying command e to remind myself and you type div div block command enter and let's just use the same nav container okay all right so we have the nav container and yeah so what I'm gonna do is what did I do oh my god see this is why I have to come back to the home it's a nav content wrapper nav container I didn't do a child ooh I didn't do it I didn't do a child now what did I do here Oh nav content container okay there we go I didn't use the same class all right remove class this is supposed to be new one content container okay and so this one will do the same thing we're gonna limit that to a thousand a 1100 and center that okay cool and then let's see here and then I'm going to flex it again okay and let's draw an e div and this one's going to be column one okay so now column one the size of it is going to be 65 percent and let's add some padding then hold shift let's say 40 there we go now I can see what I'm doing and check this out for this background I'm gonna choose this there we go okay um content wrapper yeah there yeah so this contains it okay cool and now for column two ws now called - there we go this will just we're just gonna set that to expand so it's the rest of the percentage which is 35 but I don't have to type it let the computer do it so we start 65 and that's Auto and let's also hold shift and give this the same number of padding boom cool and just to go a little bit faster since it's just content I'm just gonna copy this I don't think it's cheating I mean I'm just copying content oh I did okay all right I'll show you that so I'm copying this content to go here paste it so all this was is just a title row that has a margin bottom of 40 and it has text inside of there cool all right now let me go back to homepage and should I build this let me see you should I build it from scratch or um yeah I'll built it from scratch let me go back here there command e div WS nav items okay and I'm gonna set this to flex because I'm gonna have four different columns of content so I'm gonna set this to flex and let's put our first thing which is a link block okay and we call this WS nav item and I'm gonna make sure that the text doesn't have any underline or has the blue color so I'm going to set this to three three three good to go all right let's add the Falcon nine block five I didn't name them that's the most modern rocket so far and I think I'm gonna reuse that one all it is Falcon nine big I just set the height to 250 for the for the image size okay so Falcon 9 big and then what did I do so I went to nav items click on come on command e div and W I'm gonna call this ws line and what this is it's just that little line I'm gonna save 75 no too big say 50 and a height of 3 give it a background color of that and push it away by holding shift I'm gonna do alt because I only want the top and bottom it's gonna push this away by 20 there we go and then I'm gonna press up to go to my parent parent element command e for text and I can press return or enter just to start typing so this is block 5 press up nav item because I want to make this bold semi bold yeah there we go cool all right and now I'm going to copy and paste this three times one two three now they're too close to each other what I can do is go back to the nav items which is flex and it's horizontal and let's push them away from each other and there we go working like this you know until there we go and now I just have to double click replace which one's the next one is it you kind of look the same no that's block 5 I think huh well maybe one of these I think this is it where's my settings ok ok yeah this is the 1.2 and then we called it full thrust again I didn't name these and this one is weight okay there we go the 1.1 and this is the little baby Falcon Falcon one how cute and this one is not that big as you can tell how look it looks like it looks stretched so what I did was just I made it smaller like that oh okay look it we have an issue right here if I go to nav items notice how they're all being stretched it's because of this so I'm gonna line them all to the bottom boom cool yeah look at that progression one rocket to 9 amazing and they landed yesterday well they landed two out of three but like it was their hardest launch it was the most difficult launch so congrats to them alright so that's that let's go ahead and put I'm just gonna copy this paste it in here and this is like more information and let me just copy and paste the content from the home page really quickly copy paste and there we go alright so we have the content for the first one okay we've got some questions here oh poor Tia from LA welcome welcome on Facebook anyone else cool what dude flexbox all the way yeah yeah I'm not using grid I was thinking about using grid but for some reason flexbox made more sense for this kind of interaction okay Cory why not use 100 VW because this on bigger screens if I go like this if I preview I don't want this to go all the way I don't want this container to go all the way I think that's what you're asking about Riley says pretty sure SpaceX uses web flow to power to the shuttles fun fact SpaceX doesn't use a shuttle the use only rockets and capsules but I know what you mean and that would be cool if a sexy used webelo wink wink use it update your site anyways so now that we have this ready to go it's now time to see an interaction in action okay so let's do this this is what I'm talking about when I if you remember I went here to the nav content wrapper and I set an overflow to hidden the reason why is because if I set this to like 400 pixels or something something like this right for 50 and then I wanted to animate going down to zero this is what would happen and that's what the overflow does if you don't have overflow it would look like this your content would still be there but your overflow I mean your overflow which is the content will still be showing so overflow:hidden okay and then the height will start at zero okay so let's remove that leave it to auto and let's make an interaction I'm gonna go to Falcon okay and I'm gonna click on interactions all right so we're going to more advanced stuff here we go I'm gonna press the plus sign Mouse hover mouse hover I'm gonna start a custom animation and yeah these are how many I had to make so here we go I call this ws open nav and I'm going to take this nav content wrapper press plus and I'm going to set a size and this is going to be the initial state when the page first loads what's it look like zero so page first loads it's just the nav bar it's not the drover okay but then when I hover over the word Falcon I'm going to set this eyes back to Otto and I notice on the boosted boards they had a little bounce so I'm going to do little let's see is it bounce or back one of these let's see okay that that one bounced way too much oof okay that's a little bounce elastic oh no wait no I don't want bounce um I guess I'll just use Quinn I always go to Quint alright we'll just do that okay so that's our drawer opening and that's all we need for this okay now you might be wondering how come you didn't do any other interactions inside of it it's because I like I I want to not add too much to one I don't want to add too much to one timeline I want to keep my timelines as simple as possible okay now you'll see why later in the stream I'm going to add a second element trigger same thing mouse hover start a new animation I'm gonna call this WS nav one now the reason being is because this nav container right here I don't want to show it okay I'm gonna set this to I'm gonna set this initial State no I'm gonna set this to flex so when I hover over it it immediately turns on flexbox at the same time that the drawer is opening okay so when I go here to now contain ER I can go to styles and hide it okay so if I toggle preview let's see it happen oh wait didn't it happen what to happen quickly maybe it's my timing yeah see hold on zero out Quint point - interesting interesting hold up what's different oh yeah of course it does that because I'm on the other page go back to the home page let me see what I did so now have one yeah I just did the hide show all right and then open now what did I do now have content wrapper I started with zero and then I went to Auto point two out Quint do I have to put the background video hold on blue a background video is is on top hold on setting z-index to this two to ten so it's on top livestreams gotta love it I'm totally using the same exact settings come on internets okay set to auto Oh lovely lovely so let me see here let me add hide show no hide show - content container oh okay it's supposed to be like this and then this happens let me see here oh okay I did it but the settings are different than my homepage oh okay let me work backwards real quick so the ws nav one has this did I set a delay I don't think no there's probably a delay with the open nav let me delete this I didn't see a delay but might as well just set one just to just to see hey okay let me study this okay I'm back here open now this happens after nav overlay ah so there's a split second because my navilet I wasn't gonna get into that until later okay so what the nav overlay is it's that black area down here okay let me show you this nav overlay all it is is just that color it's a thing that makes all the content darker okay so let me make that first I guess I went into interactions too fast so let's I'm gonna leave those yeah I'm gonna leave those as is and let's go ahead and do the nav overlay okay sorry to get off-track and I hope I'm not losing anyone or get and getting anyone confused but this is web design it's not always it's not always simple but it's it's a puzzle command a div command enter and then call it WS and nav overlay and we want this on top of the background video so what I'm gonna do is set this to fixed set it to all set it's a full and we're gonna set this to Z index of nine so that way it's on top of the background video and let's go ahead and we're gonna set the background to let's go 75% there we go and we'll set the opacity to start with a zero okay all right now I should be able to do this going back to my interaction all right so in between these two I'm going to click on nav overlay press the plus sign and we'll do opacity 100% okay so it goes like that opacity should be faster let's go now Quint duration 0.2 and yeah let's try that there we go seems to be a little bit of lag and I think it's because yeah see if I can do it faster what if I go like this add these two together what happens yeah does that thing again so it has to wait so after previous action or what if I add a delay of like 0.1 nope it has to be after in a zero delay I don't figure this out but let's just keep going so we're still learning okay so we got the drawer working cool now we need to go backwards we need to close the drawer okay we need to close the nav all right now you would think it's the hover out nope we're not using hover out because if you hover out of this this element then the drawer closes we don't want that so all these will be doing is the opening of the nav okay what closes the nav is this guy right here so the nav overlay if I hover over any of the spot under the drawers that's when I close it so mouse hover start new animation WS closed nav okay so this one right here I'm going to set the opacity to zero okay and I'm gonna affect the class name rather than this thing okay and the out Quint make the duration fast and at the end of it though let's go ahead and we'll set a hiding show we'll set that to display:none once it's done so it goes like that okay cool and also this nav content wrapper the size is going to be zero okay and I want the easing to be out Quinn again in the duration to be 0.2 all right and one more thing we're going to set this back to display:none so when this is all done let's do a display:none okay right there right there right there and whoo oh look at that my oh I forgot to turn it back on but nav overlay supposed to be on where is that right here so when I open the nav nav overlay should turn on there we go so what it's doing is the size again the size of the content wrapper the thing with overflow:hidden starts at zero when the page first loads and then when I hover over the word Falcon the nav overlay does its display block and then it does an animation to opacity 0 to 100 and the nav content wrapper the drawer opens up so I told you a lot of little things are happening and it seems simple but as you get into it as you get into the weeds it's like what but yeah it's possible don't give up it's possible cool all right so that's working now a little bit more advanced now because if I hover over Falcon Heavy I want to show different content so how are you gonna do that that's what I asked myself and I was like oh and then I jumped into it and I was like oh wow so let's go ahead and go back to content wrapper um okay yeah so this container right here has my content I'm just gonna copy and paste it and now I can't see it because it has display hidden so what I'm gonna do is do display flex and now I see both of them okay now I'm just gonna change the content right now too heavy um change this to be the one that flew yesterday sidenote he imagined the two side boosters already flew the second heavy mission and now it flew the third one as well and it's like that's that's a normal for kids today that's a normal Rockets landing I mean okay anyways um oh I can't see that stuff alright let me see I can't see the content I can't scroll down so what I'm gonna do is listen here gonna go here alright so I'm gonna call this one just for now so I can hide just this give it a combo class of one there we go I'll remove it later there we go so this is block five and I'm this one it's just like version one and I'll delete these two okay oh now they're too too close I mean too far away so I need to push them all to left again okay so I have to steal margin on the side for like 30 yeah let's go 50 there we go cool all right any questions and Facebook land nope nope alright cool moving on alright let me go back here and remove this okay cool so we have all my information oh wait the information right here is supposed to be different let me go a home page and get that text got it copy go here delete pay paste there we go all right cool we are there huh I think I should push this away more yeah that's cool alright alright now it's like okay a little bit more complicated because now you have two pieces of content what are you gonna do alright so we're gonna go back to Falcon right now and we're not gonna touch this because that opens opens the drover but we're gonna go here okay now have one now I've set this to all elements with this class at the beginning because that's what webflow chose for us but you know what I want to set this to change target to be that not nav content container okay and I want to set it to selected element all right I want to make sure that it's selected here so what this does when the icon is like this that means in the HTML it's setting a specific ID to this element so it's not going to the interactions not gonna affect anything else on the page except for this element if you try to reuse this same if you try to reuse this same interaction on a different page and this element is not on the page then that's when you're gonna get that caution symbol because the interaction is looking for that element and your it's not there it's on a completely different page so it's gonna look like your interaction broke all right all right so that's done I want this to be display flex but on this guy right here I'm going to display hide I'm gonna set this to effect selected element so ws nav 1 I want to show the first piece of content but hide the second now if you add a third piece of content that's when you're going to hide two and three but show one and then with the falcon heavy you would show two and hide one and three okay hopefully that makes sense so that's why and that is why I have to hover triggers rather than just one giant one because they'll then get more confusing as you go on with your project okay so I'm going to go to Falcon Heavy element trigger Mouse hover and good reuse open nav and I'm going to add another Mouse hover and I'm going to duplicate nav one and immediately web flow ads nav two so that's cool now for this this is now this is now contain content number one I'm gonna set that to display none but nav content number two I'm going to display as flex and there we go now if I close there we go there we go okay now one more thing if I hover over this example link this has nothing to do with the Falcon heavies so I need this to close so let's go ahead and reuse the clothes the clothes animation so I'm going to click on example link Mouse hover on hover start animation close yeah so open open close and so if I go here it closes if I go here it doesn't close so all I have to do is delete these three and then copy this and paste it three times and so now all three of these or all four of these have that interaction so if I just go here and then I'm like oh what's this then that one closes it boom yeah that was a yeah it's a long a pretty long build but something that you can build on top of and again you can use this in your own project when I'm done okay let's see here what dude let's create the mobile menu to will hell okay cool yeah so when you clone this and you figure out a mobile version please bring it to the next stream or post it on the forums put it on Facebook or anywhere and I want to see you build it I mean I want to see what you've made yeah go go further than how I've gone all right but there you go and just for just for giggles what I did was for these I made these Rockets go up and then back down on hover and so let me show you how to do that really quickly all right so I'm going to go here mouse hover start animation and press plus WS rocket launch because it's going up I'm going to click on this and this is going to move and say now back to in the move we're gonna move it up just right 20 pixels so it's gonna go well that's fast all right let's make it slower seven cool all right and also the line is going to have a background color change of like orange something like this so just for fun how quaint and so it looks like this and then on hover out I'm just going to duplicate and call this rocket land and this one goes back to its original spot of zero and this one goes back to its original color and here's the cool thing all right I want it to happen to these three well to all of them and what I can do is trigger on not just this element but everything with that class name so it added that interaction to all of these and I think these two yep it did so check it out boo boo yeah reusing interactions fun times fun times move let's publish oh by the way this new button right here the team made it easier to share your project so yeah rather than having to go into the settings pretty cool oh okay any questions that was a pretty long build but very very fun to do I hope you understood it again web flow comm slash pixel geek my cloneable link of this project will be there shortly after the stream also I'll post it on my Twitter Twitter feed on the forum post on Facebook yeah I'm gonna put it everywhere so you can get it have fun with it even use it for actual paying project you know use it for your client let's see here any questions yeah so if you have any questions let me know let me know and I'll take the first five links across all the across the Facebook and YouTube I'll take the first five links and I'll review them and then we'll end the stream so all the questions but only five links here we go see here Oh awesome stream Thank You Austin see here did anyone see this project just want to answer it Thank You Bryan love you too man I love the whole community I love what you guys do helping each other out it's it's very very nice to see you know you go not a problem okay we got one too so pier Giorgio first Stephen Campbell's second what dude third anyone else in Facebook land nope nope nope okay I'm closing Facebook for now just to save on bandwidth closing that okay 1 2 3 4 web desire and then Scott Nelson we're can I find a link to all of these streaming Tuesday sessions web flow comm slash live - streams all of them is there go check him out also you'll find them on our YouTube channel youtube.com/ let's go love the streams thank you cash I have robot Robo roots all right we go okay Robo roots let me refresh what you got going on okay um so first thing I like in animation I mean enemy I like the illustration very clean I feel like this is really close to your illustration so watch out for that watch out for that and also if this is to paragraph elements they're too close to each other or make it all one text block and in in Center margin or something it's really too close to this if anything you don't I think this is using a math container I mean this is using a regular container oh oh yours in grid okay so what's the width of your grid oh you're using the web flow container so um honestly I wouldn't use the web flow container at all I would use a div block and set that to eleven hundred pixels max width alright because this is really skinny and most people have wide screens now so and also so I feel like I thought the site was done like right here at this line I didn't know to scroll down cuz I was like okay it's probably a work in progress but when I scrolled down the animations happened so I would suggest just making the animations show upon upon load rather than on scroll that way people will see there's more content because if i refresh is there content I'm not sure if I scroll down oh there is and then I keep going okay keep going I would align all of these to the top so your baseline for all this text is on the same yeah you know baseline moving on you know be cool if you set this background to fixed let's see here where's your background okay you cover background position no how do you do um fixed what's the shoot see that's why I like web flow I don't have to remember the CSS property let's see here background sighs no attachment oh it's attachment fixed okay cool so if you do your background fix I think it's a pretty more cool of whoa look at that glitch is that just on my screen or okay cool you know this glitch reminds me of the intro to matrix when you're seeing the Warner Brothers logo come in Wow anyways I think it'll be cool if it was fixed Oh an your's okay it's scrolling is parallaxing okay I see so maybe you should I do let's see here you're parallaxing okay ignore me I like it but make it wider that's I would say all right next one clothing concept Steven Campbell what are you working on and also if you have any question one more time I love everything except for the bounce I would use a different ease just a regular out back I would use easing of out back not bounce because it's it's like this is nice and smooth and then you get this one it's like kind of kiddie like like you know um I would do out back and every time I say out back easing I'm like I need a bloomin onion now okay you got hovers nice is this on web flow ecommerce I'm interested did you make this on web flow ecommerce if so Bravo to you sir rava I still have yet to make an e-commerce site on my flow I need I need to but this is nice it's nice great job I'd either then balance of yeah great job Steven um let's see here okay next not a problem up here let's go to what dudes solar farms there you go there we go Oh that'd be so cool if these dotted lines we're moving or something in the future maybe with a lot II in bed right right you can have some SVG animations you can even have the Sun like up here or something like going past or like going like this from from here here and then you see like these solar panels they become like this black no it starts like like yellow ish to orange and then to pinkish and then black because it's night so like oh my god that'd be so cool Oh Lottie when soon okay moving on okay so that's happening that's happening to you I'm just thinking about Lottie so much with these illustrations because like what if they moved what if they were moving what if they're animated uh all the things I would put most popular mmm it looks weird how most popular is right here okay I know what I would do I would put most popular like as a as a slanted ribbon right here like if you I wish I can like just let's see here okay it's position:absolute so I would do left zero or like like something like this and then the top is like this and then I rotated it nope so something like that you know what I mean like it's more of a little baggy thing yeah yeah a little call-out yeah so something like that because it looks weird when it's right here alright and I don't know if I would call out this would be the most popular because obviously free is popular than not free but that's just me um mostly here okay I like these cards these cards are nice and clean and I love the cleanliness of your site and then the the colors that you've chosen because you know solar is all about clean energy and then the colors really feel like that and then a darker color to give it a footer love it yeah love it great job all right moving on to Webb desire what are you working on all right not gonna translate it I want to see it I'm guessing this is cookie uh okay you change you're doing a custom mouse cursor that's cool let's see what your menu looks like okay I like it but it's a bit slow I would speed this up about two times three times faster the reason why is because if I were to click menu multiple times because I'm looking for information I'm like alright what are the other pages and now I get to breathe you know and now I get to gather information but it takes way too long just to get that information all right moving down cool this is fixed love it oh we're doing some stickiness okay okay we're doing okay ooo what it was going on okay okay I see you I'm enjoying it I'm enjoying it oh yeah okay look at you look at you doing things oh wow let's go oh yeah oh yeah besides your menu great job oh man okay now I need to translate it now I need to translate it okay so what are you doing are we doing storytelling so website is the center of your internet presence yes storytelling beautiful here we go oh yeah keep going why professional design unique design so you tell you're telling people the story of what you guys do and why you guys are so professional and you're right here you're saying the proof is in the pudding we do some awesome stuff with a unique design you're telling time is money like oh great job to your team uh I love it and then this part right here it's like whoa that went fast wait a minute wait a minute did yeah you did why not of course you did let's go all right um we see one two three four okay last one cleaning star by Jade or Tjader and let me see oh yeah I already closed Facebook okay here we go okay okay so it's a template okay so when it comes to template you have to make sure that you find ways to make the templates stand out from competition and stuff like that is your copy and your con is your content which is your copy and your imagery okay you don't want another cleaner you want time huh that's so good copy that makes sense yeah you don't you don't hire cleaners just to clean you're just you're hiring them so you can gain back time because like as they're cleaning you can be doing other stuff that you need to get done huh I could be used for web design or something like you you don't want just a web designer you want time for your business and where's your copywriter good job all right cool cool cool okay so still working at it got it all right nice okay all right great job all right let me do one more just raluca what are you working on UI designer I turn your project into something fun and unique okay so you have a slider that's happening for different texts mmm cookie and so uh whoa okay that's cool I was gonna say I was gonna say it'd be nice you know right here it's pretty cool pretty cool but it'd be nice if there was like some sort of illustration of yourself and I was about to say it and then I saw this and I was like well beautiful okay watch out for your text here it's getting lost here either put some sort of box around this whole piece of content and have that kind of a transparent color that's nice you did some good work good job oh and you have a shop is this weapon ecommerce yes it is let's click on one I think we ought to stop the puns Vlad would like this listen what if I click on it what happens nothing okay fancy meeting each other I'm like it oh you have a lot wow if you have a rocket okay you don't well if you ever have a rocket illustration let me know I will be a patreon and I will I will purchase one these are really nice your love like honey blueberry Oh your love like honey and blueberries okay okay I get it or I don't I don't know okay good job yeah this is really really cute I love I love everything okay take it step further what if this wasn't what if this section right here wasn't so thin what if this was like a height okay oh you're doing a height of a 55 VH what if it was just a hundred right and this slider math nope so this is within a container yeah so what if he didn't use the container well you know what if them what if you used didn't use the webflow container what if you use a div block that was 1100 but this paragraph or here this one right here was like max width of 300 like wouldn't that I feel like that one's pretty cool something like that that's a max with a 400 or even 500 yeah some like or even not 500 pixels maybe like a percentage 35% yeah probably a 65 percent so it's responsive to and so it's more of a more of like you get to show off what you do and then this copy doesn't get lost here you know yeah good job but Luca good job all right cheese tabs for the product images okay cool um yeah so that's it for today let's go here alright awesome everyone who sent in a link y'all are awesome thank you for showing off what you're working on I hope my suggestions help but again design is subjective and if your site is already performing well and you're getting people to buy your things fill out a form or contact you or do whatever you the site is supposed to do for the main goal then hey so be it that's why there's like a be testing you know so yeah let's listen the stream these streams no no I always say oh yeah if you have any count billing or technical issues questions concerns please go to university web flow comm slash contact and the support team will help you out as fast as they can see hear read alright boy forget it okay if you have any design or custom code questions please go and join the community over at forum webflow comm and ask your question there and do me a favor if your question gets answered please pass that favor forward by answering someone else's questions so we can all grow together these dreams happen every Tuesday at 10 a.m. Pacific time on our youtube channel youtube.com slash webflow subscribe hit the like button leave a comment if you liked it and also hit the notification bell so you'll know when we go live and you can join in the live chat room ok social media yes instagram.com slash web flow twitter.com slash web flow if you want to follow me on twitter I'm at the pixel geek facebook.com slash webflow I think that's about it and hey check this out we got some finally we got some music screams pretty cool and to stardom so thanks again to Meg who's in our new person in our community team she found this track so yay to her oh yeah I will see you guys next week we're going to have a another community spotlight a friend a community member is going to show us how to do how to recreate the Mac Pro page alright well some interactions there and how to build it and whatnot it's gonna be fun and if you want to be on the stream as a community spotlight hit me up on Twitter or post on the forum and we'll talk ok either than that thank you all so so much for being on the stream I'll see you next time and as always make the web beautiful see ya [Music] [Music] [Music] [Music] you [Music]

Channel: Webflow

Views: 27,462

Keywords: webflow, megamenu, mega menu, building a mega menu, mega menus, how to create mega menu, bootstrap mega menu, css mega menu, css megamenu, megamenu using html css js, create a dropdown menu, html menu

Id: BBTrIJFRnyY

Length: 78min 2sec (4682 seconds)

Published: Tue Jun 25 2019