Stacking Fixed AND Sticky Headers - Figma Tutorial

okay on today's quick tutorial we're going to talk about stacking a fixed navigation header on top using figma's new stick at the top feature so you can see I've got yellow here we'll say this is like browser Chrome or maybe a sub navigation and that's fixed and then we want to take this header or this navigation and we're going to pin it underneath I got a few questions about this in the comments so I figured I'd do a quick video on how to stack it all right let's get into it all right so first things first I've set up my screen so this whole screen is just an auto layout I've got my spacing set at 30. I've got my bar up here enable the Chrome I've got my nav here and uh this is pretty much all it is it's one big scroll okay so the first thing we're going to do is we're going to put our Chrome at the top so I'm going to go over I'm going to hit absolute position prototype fixed stay in place all right and now the problem here is we've got this overlapping so I think that's 45 so what I'm going to do is I'm going to add individual padding to My overall frame and I'm going to go 30 Plus 45. and that pushes everything down so now it sticks at the top so now we just need our fixed navigation to pin underneath it so all we have to do here Well normally what you do is you take this you go to prototype position stop at the top Edge done the one thing you want to make sure is that you are set to I think this is last on top I think that's right we're going to find out yeah so it sticks but it sticks to the top so the Chrome's in the it is covering it so that's the problem that everyone's having so what you need to actually do is take your navigation frame shift a so wrap it in another frame and get rid of the spacing there there and I'm going to open up um individual padding and we know this chrome is 45 so I'm going to put 45 top padding on it okay and now we're gonna have to reselect this outer frame go back to prototyping and pick sticky and now you'll see with that extra padding then that stops right underneath the Chrome now the issue here is that your spacing is off like if you don't care about that that's fine but if you do what you can do here is you can take this Frame you can wrap it in another frame and then just change the height by that offset of 45. and then that'll bring all your spacing back and now everything works just as it should you've got navigation stacking under a fixed element um if you've got a better way of doing it let me know in the comments like subscribe join the conversation check out my patreon and uh thanks for watching we'll see you next time

Channel: Darren Northcott - Figma, UX & UI

Views: 3,971

Keywords: ui design, figma tutorial, figma prototype, sticky header figma, fixed position figma

Id: rCMr6BctEK4

Length: 3min 51sec (231 seconds)

Published: Fri Jun 02 2023