Nav Takeovers | Webflow Development Tutorial

hey y'all my name is joseo kondo i'm a chattanooga based web designer and webflow developer and in this video we're talking about nav takeovers now if you don't know exactly what i mean here's a quick example it's when a hamburger menu button or something like that kind of unfurls this whole menu that takes over the page and there's a lot of um kind of easing or eased animations that kind of gently guide you into the menu and what i love about this is it just creates this feeling of um almost like a docent in a museum but you're just kind of being guided through the website and this really kind of informed and um purposeful manner this is provider store that we're looking at um and i love how they thought about not only how the menu would animate in but also how it would animate out so beautiful i've got two other examples here that we're going to look at just as inspiration for um ourselves when we jump into webflow in just a few minutes here if you want to jump ahead i'll make sure i have that tam stamp in the description box below but getting to our next inspiration here is bonjour paris and if you open up the menu first of all beautiful entrance kind of sliding in from the right we've got a lovely image which i think is tied to these main key pages and then interestingly enough they have the full index of their entire website or not the website but all of their projects right in that navigation so super cool and then there's bruno which i think they recently rebranded they used to be a jeansman a french creative agency and i love uh just the simplicity of this um and again they've thought through not only the anime in but also the anime now so i have definitely inspired um in a minute here we're gonna hop into figma to look at the design that i created and then start in webflow to learn how to create things just like these nav takeovers hope you'll stick around [Music] all right so here we are in figma and you can see from what we're looking at that this is a lot simpler than some of the examples that we were looking at but really the idea is just to teach you some of the techniques and then you can take those and run with them in your own creative projects all right so we're actually going to start with just taking um or creating this part of the navigation bar um so in webflow let me go ahead and move this over before i keep doing this let's add a navigation bar and by the way i have been almost exclusively using the navbar component that comes out of the box in webflow because it's accessible so if you're using just a keyboard to tab through all of the different elements on a website you can actually tab through the nav bar and open up the takeover just with the keyboard that's amazing you can't really do that if you create a custom navigation bar using animations but it does come as part of the navbar component and one of the ways that you or one of the things that you have to do to get that to happen on desktop at least is here in the settings of the nav bar under menu icon 4 it's currently set to tablet and below we want to go ahead and bring that up to desktop so that we get the menu button and we can actually go ahead and just delete them all right and then i like to use my own custom container so we're just going to go ahead and nest this stuff in here and delete that um we'll call this anti for now takeover see container and uh here we go nt call this logo wrapper i don't really know i'm not the best at naming nt logo um actually i already have that let's go ahead and whoops add our logo then let's call this empty menu button add an embed and we're going to go ahead and just use copied svgs for this and if i do right click copy and copy this svg this is in figma but adobe xd and sketch all of the major design softwares um have that so now we can go ahead and close that out and then we'll give this a class as well of empty icon and i'll go ahead and set it to flex um because that helps with eliminating some of that extra space and if you saw that little jump all right um next is um well we can go ahead and get rid of this default gray color and i think it has a border bottom of gray next is this is just a bit of best practices but with websites you always want the um clickable area to be as large as possible so here uh what i've seen a lot of folks do is like um if i zoom out here they'll say okay this is 24 um of spacing on either side and 48 on the left and what i've seen folks do is something like this i'll kind of move it over 48 and then 24. but the problem is that we're restricting the clickable area to just exactly the text so if i kind of move my cursor around you can see that it's no longer clickable so if we just use padding instead we can actually achieve the same thing we get that spacing that we had before but now when i preview this whole area is a clickable target so we're just going to make it easier for users to click on what they're trying to click on okay and then with the container if we make this flex um and we set it to space between um then we can actually just have this be the same so i'm going to set this to zero top and bottom and 48 on either side just like we did with the logo wrapper and then with this i think if we set it in the middle and minimum height 100 um our menu icon will be right in the middle so now this is opening our nav takeover just like we wanted all right so next up is actually developing the inside of the navigation the actual takeover before we do that let's go ahead and add a div block and just that we can kind of see what we're doing let's add a little bit of content um i think i have this class here that i used before um and that way we can just kind of tell when the navigation is open and when it's not i have takeovers all right and then we'll just copy and paste that just so we can scroll a little bit which will help us to do our work and then the last thing i forgot to do is set this to position absolute right now it's relative and you can leave it relative um if you need to um but in most cases i end up making the nav absolute so that it can layer on top of my header um so i'm gonna go and make that absolute and set the um division to top and now we're ready so we can actually come in here to the navbar settings and click open menu all right the first thing we're going to do is just get rid of some of this default styling and what's kind of funny in that it's telling you that you have a transparent background when obviously it is not so you just have to go ahead and declare that so it gets rid of that default stuff okay and then we'll call this um nt nav menu and i didn't spell that correctly and the first thing we'll do is actually we'll leave the gray on there just for now so you can see what we're doing here but i'm gonna set the position to fixed and full so now no matter if i scroll the nav is going to stay in the viewport the other little trick i like to do is i like to create a div block and nest everything inside of it because the nav menu it's a component that's a part of the nav bar um you can't get rid of it and just like we saw with the menu button where it had a background color even though well was telling us it didn't there are just some things that are part of the nav menu that um are just kind of like uh you can't figure out what's going on why it's wrong and it's because there's these kind of hidden stylings sometimes so i like to go ahead and create a nt nav menu enter or something like that and set it to um position of width 100 height 100 eh and let's go ahead and set the overflow to auto and what that does is it will ensure that my little light just turned off that was kind of weird it will ensure that if the content overflows we're going to get some scrolling so that the user can see the rest of it that's probably really important especially on mobile if you have too much content okay so we've got this set up the other thing that we can do is um we can go ahead and set the positioning of that to flex so that we can get this stuff kind of in the middle so we'll do flex and vertical and align in the middle and then we can go ahead and nest these things all right there we are and let's go ahead and add two of these and then we also need to nest these in a diff block so that we can do flex actually let's do container and then flex between all right so we're kind of going for that layout where we've got one thing on the left one thing on the right we've used our container class to constrain everything in the middle and then we use our flex between combo class to get everything to align on the left and on the right since we've got two div blocks holding everything uh they're using that space between uh to align on the start and on the end okay let's do a little bit more setup with the nav menu you can go ahead and set that to white um why is it still gray oh that's text color sorry about that it's white and then i like to go ahead and make sure that the z index of the nav menu is higher than um the actual nav which i will set to the nav bar i'll set 2.99 so that it can be above most of the layers on the website and we had something interesting happen did you notice that uh the menu button went away so if i go ahead and remove that 999 it's back and i actually want to not have it show up um and the reason is i want to actually have two different menu buttons one for when the nav bar is closed and one for it when it's open and uh when we get closer to the end of this tutorial you'll see that we're going to be using a little bit of javascript just a tiny bit um so that um when the navbar is open we don't get any scrolling like right now you can see i'm getting this scrolling nav bar it's because even though the navbar is open the website is still scrolling behind it we want to remove that so one of the things we can do is with nav menu enter we can add a div block and actually this is wrong it should be horizontal no vertical and we should set it not to middle but to a space between just like we did with this one and if we add another div block this will stay in the middle okay and here we can just duplicate the work that we did out here all right so now we've got the menu button back but this head nav bar is actually different from the one that's on the home page um the other thing i'm going to do is i realize i made a mistake but i've got the kind of border bottom on the actual nav element and i want to do it on nav container so that it can pull into the takeover okay so that little border is still there but it's also still there um in the knob takeover okay the other thing we can do is we can add our svg elements and i went ahead and exported these already and i think this one is in the top right uh corner and it's about uh we'll say well first of all let's remove the tiling and from the top 117 pixels does that work yes it does okay cool and then we can add the other blob as well i think this just goes right down in the lower left hand corner and it does okay so we're kind of getting there the other thing we want to do is with the container we want to constrain it a little bit more so that was 992 so we can set like a max width of max width it's really like 1080. i'm just going to push the content in a little bit all right awesome we're actually really close kind of surprised okay and then the last thing is um these are actually aligned to the bottom and i bet this is not um these are aligned uh stretch so you know what i might do now that we've got all these different combo classes i might go ahead and just do um duplicate this and call that nav menu container and this was 1080 and anytime you find yourself creating a bunch of combo classes it's probably a good indicator that you just need to create a new class and it was flex it was space between and align bottom okay so here let's add a text block and shuffle it to the top and this is going to be our over line um oh that looks awful okay so enter and let's just copy some of the styles here really quick inner bold 13 over 16 runs and i can't remember if i've covered rams or not but we'll just kind of skip over that for now since we're not really talking about that um bold 1.2 ms um primary our primary blue is this one i think and in terms of spacing 4 which would be 0.04 m's okay and then this is going to say primary links all right let's create a anti nav link and there is one two three four copies of that we can delete these one two three four and notice that they're all on the same line that's because their display is set to inline block an inline block means that they will stay in line with each other until they run out of room and they'll cascade down to the next line block means that they will not be in line they will be on their own line okay so we've got a little bit of spacing 16 pixels so what i like to do is have that half that and add it there as padding and let's see it's 72 pixels rim it is about uh let's just say 1m of spacing looks like this is pretty bold is it just bold yeah i know it's black oops i don't have black but that's okay okay and then the other thing i noticed is um everything's aligning in the middle so we just do text align left okay so great let's add the content home how it works pricing and oops content okay and i also noticed that there is some spacing here so that is 48 pixels so let's do um uh let's actually add a dip block here and i'll show you well we'll kind of discuss this why and then a little bit oops not equals but margin bottom 48 and glad that 48 pixels of padding there or margin there all right so we've got the left-hand column um i can actually copy this and do secondary links alrighty and um whoops let me go ahead and shuffle this to the top here and this will be our secondary accent t secondary you can delete these and how many of these do we need one two three four five two three four five so then to position block just like we talked about earlier and we can give them some of the same stylings uh so this is going to be eight and zero uh looks like this is semi-gold maybe yeah 24 16 um and minus minus 0.01 m's okay that looks pretty good faqs about careers blog all right great looking good so far um i think we could bring this in even closer because getting a little close to this blob here so we'll just do 960. okay and um let's go ahead and add our social elements and we'll be pretty close to ready social links and team and we're going to use margin and padding to get this spacing right here so this could be 48. this is 48 and i have no idea what the color is but we'll just use the ccc color that we used previously then let's add a link block and this will be our social icon i forgot to give it the prefix here for this particular project and let's go ahead and get some of this styling here so 40. i'm actually going to make this 48 because i know uh just from experience at this point that if you have a target that's less than 48 pixels square um google will ding you and say hey that's not accessible uh you have to have at least 48 48 pixel square uh for it to actually let me do text link i don't know why i was doing block okay and then um i think i'm using font awesome but by the way uh it's more accessible to export those as svgs and give them an alt text because um why is it oh it's not inline block so in order for that 48 pixels to take effect got to make sure that text link is uh in line lock actually i think we can use um flux to get that in the middle there and then we can take off the underline and give it a white which i'm feeling accessibility that work okay that works oh that's how i had it here okay cool okay so let's um copy and paste these a couple of times and for our social links let's make this flex and um let's do this let's give it a margin of eight and how do i want to do this um you know what i changed my mind let's remove this and instead of this being flexbox let's make it this ucss grid and we'll just make sure it has four columns and that way we're getting a nice even line with this little border above it all right and then oh these are actually black i just noticed but you know i kind of like the blue better i'm just gonna leave it blue okay um so zooming out looks like we've finished um setting up the navigation and just so that you guys can kind of see let me close that preview this and now when i open it we're getting the whole navbar come in uh currently that the animation is not the best um if you don't have time using at least overwrite is a little bit easier so like ease out so even if you if you don't have the ability or time or whatever it is to do the custom animation even just doing that helps oh whoa why did they do that isn't that interesting that before it wasn't um that's so weird um does that help hmm okay not sure why uh that did that but okay um but now we kind of get at least a little bit of an animation in um in this next part we're gonna totally do away with that and create our own custom animation with our using webflow animations just to make it that nice smooth look that we looked at in some of our inspiration so there's a couple of things that we need to do to get our navbar ready for custom animation one of them is actually just removing what we did so i'm going to set this to zero the duration and just to be safe go ahead and make these all in the linear and if you try it out right now it'll look like it's just kind of appearing suddenly um so we're obviously going to take care of that all right next is with the kind of parent navbar element selected if you go to the animations tab there is a element trigger specifically for the navbar opening we're going to click on that and let's just go ahead and create a new one called nt nav opens okay now that we've added this webflow is kind of realizing oh hey okay they want to have their own custom navigation we're gonna cease kind of like the animations that we're using previously and now we're going to let them animate in everything so first thing we want to do is remember that i talked about how the nav menu is kind of like this integral part of the component well we can take that nav menu and we can set it to hide and we want to set the initial state to display none it's hidden when the page loads right so the initial state is hidden then we also want to set the opacity to zero by the way you can kind of decide how you want to do this like i do remember that um example or the inspiration from bonjour paris but it kind of slid in from the left so there's different ways to approach this we're going to take more of like the provider store inspiration and just kind of animate everything in really nicely and softly all right now that we've got our initial states let's go ahead and and uh you know what has been doing this to me recently where um i want to set this to the initial state and i want this to be block okay so basically what i've done is saying okay on when the navbar opens in other words when i click on the menu button um go ahead and uh set the display to block but we can't see anything yet because our opacity is still at zero so after the display setting let's add an opacity and we're gonna set it to 100 and we'll do something um fairly quick like point three give it a little bit of ease so let's go ahead and test that out and see how that's working all right so we've got kind of like the bare bones the beginnings of how we're gonna make this work we got to do a little bit more homework here i had to set this up um but basically what i'd like to do is animate and um a couple of items in kind of a staggered fashion so i want primary lengths to come in first followed by these links all kind of separately then secondary links and then i think we can animate all of these in as a block and animate this and as a block as well i really want the focus to be on these links so we need to give these some combo classes so that in our net or in our animation we can target those classes and uh not uh not affect too many elements on the page uh so we're gonna call this uh nav one and this will be nav two and f3 and we're going to nest all of these um well i should have done this before but we'll nest all of these in a single div block so we can kind of animate it in as a single element and you can decide to do something different if you wanted whoops they need to do that if you decide that you want to animate them all separately you could do that and part of it is i'm just trying to save time i have seven i think hey now five i have six and seven and then actually the social links we can um not give a combo class because there's this is the only instance of that class so everything's got a combo class something a unique identifier that we can hold on to so if i click on the nav we can access the opens and this is kind of the painful part here of making sure that everything has a um a starting state and an end state so starting with the overline let's move it down and let's say 48 pixels and the opacity to zero so this is what it's gonna start out with and then after the nav menu animates in so we'll do something like a delay of point two we'll set this to 100 and we'll set the move to zero so that's basically the strategy for this is making sure that everything has an initial state and animating it in i'll do a couple more and then i'll speed up the video a bit so with this first link let's move it down 48 pixels and notice here that i'm targeting nt nav link nav2 and that's how we added those combo classes so we can uniquely identify those elements and then opacity zero and then down here let's add a move bring it back to zero pixels which is the where it's supposed to be and then we also don't want to leave it at a delay of 0.2 let's let's do a delay of 0.3 okay and then an opacity of 100. so now i just have to go through and um add all of the animations here in our mega navigation animation um so i'm going to go ahead and speed up the video and you guys will catch me on the end when i finished adding all these items [Music] in all right so we've got all of our animations in and now we just want to customize the kind of timing and easing a little bit so it has that really smooth feel so if you kind of notice right now if i play it everything has a time of a duration of 0.5 seconds and a easing of linear and so it is animating in but it feels really stilted and it's not very smooth or graceful so i'm going to click on the last item and shift click all the way up to the nav menu which already has some easing applied to it and let's go ahead and make it one second instead of 0.5 and the easing we'll set to outquin now you can experiment with the times and the different easing ones those are the ones that i've gravitated to but you definitely kind of choose what you think works best and now if we try it everything is animating in way better all right let's go ahead and double check just by previewing it and it's looking great one thing i did notice is i forgot to change out this icon here um so let's make sure that we have the menu open let's open up this and right here let me copy this sdg and paste that in all right much better okay um so two things remain for us to call us today one is we need to set the animations for when the navbar closes and then the last thing is just making sure that the website isn't scrolling behind uh this now takeover when we have it open um let me just change this to capital o for some reason that was bugging me okay and the way to do it is super easy because now that we've got this set up we can just duplicate it and use the ones that we already have in here just to make things super easy okay so the first thing we're going to do is we're actually going to delete all of the ones that are introducing or adding in the elements because we want to do the opposite we want to return it back to the initial state so we can take all of our initial state um settings and just unclick initial state and now they're actually animations so the one that we definitely want to make sure is very last is this hide we want to set it at the very bottom so that it's not kind of clipping the animation next we want to do is we can just kind of give everything a out quint uh ease out of 0.5 seconds is probably fine and to test that let's go live everything is open and close everything just kind of animates out um i think if i weren't doing this as a tutorial video i may stagger the animations a little bit so that everything kind of animates out at a different speed but i think for the purposes of this tutorial um that's looking great all right we're on the last step of our nav takeover by the way you might have noticed i'm wearing different clothes this is the next evening for me but anyways what we want to do is we want to make sure that when the user scrolls when they have the navigation bar uh sorry the nav takeover open the website is not scrolling uh behind you so just to give you an example of what i'm talking about let's give this a background um i don't know color class and we'll just give it some random color here that's already in the palette and there we are okay so if we preview this we open up the menu and i'm scrolling with my mouse wheel notice that the scroll bar is open on the right and even though i started at the top of the page when i close the menu i'm now at the bottom of the page and this is not expected user behavior the user expects that when the navigation menu is open the website is not scrolling uh behind it so unfortunately there is not a easy way to take care of this inside of workflow it requires a little bit of custom code but the custom code is very minimal and super easy to implement and there's a couple of great resources one is from timothy ricks or trixx and i'll link his video um but the one that we're going to use is actually from nelson from pixelgeek who works at webflow and we're using his stratagem just because i find it a little bit easier to use but i would encourage you to learn about both methods and you can implement the one that you find easiest with his we have to have two different classes one for opening the navigation menu and one for closing it that's why we have one button for opening and one button for closing that's how we built this navigation menu so um here is the video where he talks about um how to implement this and i'll make sure to link it in the description box but basically we need to add a little bit of jquery and the head tag and a little bit of css so we're going to copy this come over to our page and by the way i would do this in the website settings not just the page settings but since i have multiple kind of like projects in this one site i'm just doing it in the page settings but let's add a script tag that was missing from nelson's um thing there from his uh video and he explains it very carefully in his video but just a quick overview is that um this script is looking for this class when this class is clicked you can see click here it adds a class of no scroll to the body okay what does that do well if we come over here and we go to our body and we go to body all pages and we set it to overflow hidden and publish now remember that there's two sections um on this site now if i refresh and i scroll down i can't you might hear me hitting my mouse i can't scroll down that's because body is set to overflow hidden all right so let me go ahead and republish and so essentially what this script is doing is it's saying hey when somebody clicks on this class set the body to overflow hidden and we get that from this right here so we can add a style tag put that in and style okay so now you see no scroll is a style of overflow hidden and it's getting that that class is getting added to the body just like we did right now where we set the body all pages to overflow hidden that's essentially what this is doing and on close it is removing that class from the body let's go ahead and save that and the first thing that we want to do is make sure that we have two different buttons one for opening and one for closing we have nt menu button that's for our opening button so we hop back into the pig settings and we want to change menu for our class that we're actually using and then if we open up the menu right now we're using the same class for this but we actually want to duplicate it and um you can name it whatever you want but i'll just add close um append it at the end there and then in the page settings we're going to add that same class instead of what nelson had in his script all right so this is now ready to go so if i publish this uh you know um publishing is always a little bit nerve-wracking when you're doing a tutorial because you're never low you never know how long it will take okay so again i can scroll when i open and i try to scroll you can hear me scrolling on my mouse nothing is happening and i close it i'm still in the first section i haven't scrolled but i can scroll again when i've closed that's because when i hit this button i'm hitting that class that no scroll style is getting added to the body tag i can't scroll when i click this class it's getting removed and i can scroll again but we're going to have a couple of issues still so we need to add a few more steps what if there's an in-page link so what if i open up this and about is supposed to take me to this second section we're going to have a couple of issues so the first thing that we need to do is open up our menu and we need to add a animation to all of our links to make sure that if they are added if they are linked to something in page uh that um the navbar is actually going to close so i've added um previously i added an id to this section of about and i added a link to that section here on the about so if i try to navigate to it notice that the nav bar isn't actually closing now the website has taken us there but we probably didn't get that smooth scroll and of course the navigation bar not closing or sorry the menu not closing is a pretty big deal so what we can do is in the interactions we can add a mouse click starting animation and set the animation to nt nav close so we're saying okay when you click on one of these links close the navigation bar and we want the trigger not to be the element but the class and we want to make sure that the class is like the parent class or there's no combo class on it so now all of these have that same class let's do the same thing over here when somebody clicks start an animation close the navigation bar make the trigger the class and don't have the combo class but make it the parent class so it applies to all four of these all right we need to do one more thing actually two more things you want to make sure that all of these um classes we're not targeting the children we're actually targeting all elements with this class um the reason for that is because the about is the trigger like when somebody clicks on it and the about but nav 7 is not a child of that link it's actually a parent element so we've got to make sure that this set to all elements so that the animation actually affects all these things okay just a couple more here all right so i think um i previously did this um okay that's perfect i previously did this to the open so if we go to the open all of these are set to all elements all right and then there's one last thing i promise the last thing that we need to do is we want to copy these classes for the links and we want to add them to our closed script here that removes no scroll from the body because notice that the navbar or sorry the nav menu keeps saying that it's going to close but we haven't actually hit the close menu button so we need to add the classes here and the way you do that is you add a comma you add a period to indicate that it's a class and then you add your class you should do the same thing for these guys scroll down add a comma at a period to indicate it's a class and paste all right so now if we hit the menu button if we hit the primary nav link or if we hit the secondary link i got that backwards but you know what i mean um then body will have no scroll removed from it which is exactly what we want okay now we're going to publish and i hope i did this correctly um we'll see if i did all right let me remove the hashtag there open that first of all let's check if we get any scrolling no no scrolling so so far so good close the menu we can scroll open it up again click about the nav uh menu closed collapsed and we spread scrolled down to the about section was exactly what we want and we can still scroll in and out of the page all right so that does it for this tutorial i hope that you found the content engaging i know that i really enjoyed the topic of nav takeover is that metaphor i talked about at the beginning of the video of like a dozen walking you through the museum that really is what this is like you know just kind of introducing new users to the pages on your website the content um in this really slow kind of methodical way so that they don't get overwhelmed so anyways i hope that you consider it for your next project and speaking of next projects i'm starting a new skillshare class going to start recording uh next week i think so make sure that you subscribe get notifications by hitting that bell icon so that you can get a prize of when i release that skillshare class and i'll probably be adding some free content from the class here on youtube all right that's enough from me i'll see you guys in the next one

Channel: Jose Ocando

Views: 2,867

Keywords: Webflow, Tutorial, Web Development, Website Development, Web Dev, No Code, Nav, Navigation, Navbar, Takeover, Full Screen

Id: 8mlrAq2bmEs

Length: 47min 51sec (2871 seconds)

Published: Sat Mar 13 2021