How to stick Navbar to the bottom while scrolling in Figma (fixed positioning)

preview_player
Показать описание
Start your UI design journey, get my UIUX design course for beginners for 5,000naira ($6):

Follow me on Twitter:

Keep creating magic! 🖤
  1. Davio White
  2. viral
  3. interaction
  4. prototype
  5. figma
  6. design
Рекомендации по теме
Sticky Navigation Bar 0:03:56

Sticky Navigation Bar On Scroll Using Vanilla Javascript | Fixed Navbar on Scroll

Create A Fixed 0:08:00

Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial

Creating a sticky 0:01:06

Creating a sticky navbar — Webflow tutorial

Prevent Fixed Navbar 0:03:25

Prevent Fixed Navbar from Overlapping Content (Content Shifting Upwards)

How to stick 0:01:24

How to stick Navbar to the bottom while scrolling in Figma (fixed positioning)

Sticky Navigation Bar 0:06:14

Sticky Navigation Bar on Scroll using HTML CSS | Fixed Navbar on Scroll

Pure CSS Sticky 0:11:49

Pure CSS Sticky Header - Navbar Fixed Top After Scrolling - No Javascript

Sticky Navbar Tutorial 0:05:47

Sticky Navbar Tutorial | HTML, CSS & vanilla JavaScript

Create advanced navigation 0:05:07

Create advanced navigation menus on your Notion website with Super

Sticky Navbar on 0:07:36

Sticky Navbar on Scroll With CSS | Change Navbar Color on Scroll With Javascript

1 Minute Figma 0:00:42

1 Minute Figma Tutorial - (Advanced) Sticky Scrolling

Sticky Blurry Navbar 0:07:08

Sticky Blurry Navbar Using HTML CSS | No Javascript Required

You probably want 0:15:55

You probably want position: sticky instead of fixed

Sticky Navbar Bottom 0:09:44

Sticky Navbar Bottom | Only HTML and CSS

Bootstrap 5 navbar 0:02:49

Bootstrap 5 navbar fixed top without overlap (SOLVED)

How to create 0:08:44

How to create Sticky/Fixed Navbar on Scroll | Bootstrap 5 Responsive Navigation Bar

Create a sticky 0:09:39

Create a sticky navbar with a dropdown menu — Webflow tutorial

How To Make 0:13:37

How To Make Sticky Navigation Bar | Sticky Menu On Website Using HTML CSS & JavaScript

Sticky scroll 0:04:41

Sticky scroll

How To Create 0:01:55

How To Create a Sticky Navbar on wordpress 2024

Double Navigation Bar 0:07:35

Double Navigation Bar using Html and Css | sticky navbar

Create a sticky 0:04:44

Create a sticky navbar using position: sticky

How to Create 0:08:00

How to Create Responsive Navigation Bar using HTML and CSS

Sticky Navigation Bar 0:01:49

Sticky Navigation Bar On Scroll Using Javascript | Fixed Navbar on Scroll

Комментарии
Автор

That's not "it." You also have to mark constraints in the right sidebar to left, top, right for header and left, bottom, right for nav bar. You also have to set the parent to vertical scrolling.

heartnsoul
Автор

great video! straight to the point and I got the job done quick and easy

missceebrownin
Автор

Amazing! Tried following another tutorial for far too long. With your video I got it done in 60 seconds. Thank you very much!

antonbredl
Автор

Well done boss... Thank for always improving our UI knowledge.

NahtaNX
Автор

Thank you, Davio. What font and icon library did you use? It looks professional.

paytharaka
Автор

Thanks Bud, I was trying to figure out how to do this. Awesome

CaryChandler
Автор

Hi, does anyone know how to do it with an element that is not in the 1st fold and then it needs to be stop at the bottom when scrolling?

RaysaMarcelino-ymtz
Автор

Thank you, Boss.
I am newbie to this space.
What are the stages and processes I should start with that you would counsel someone like me, Boss?

Thank you, Boss

perewariiempirestate
Автор

Thanks for the video, when i did it my navigation bar isn't showing again

suliatamusat
Автор

Hi, can you help me with this issue 🥲 when i set it to fixed position it disappears, i cant see it on screen while in prototype

cqh