Part of 100+ video lessons
Short, step-by-step lessons you can rewatch anytime.
Hands-on project
Follow along in the host project and build as you learn.
Certificate path
Counts toward your Framer Fundamentals certificate.
Sketch the bar, turn it into a fixed component, then add the hamburger view.
Sketch the bar
Logo, a link holder and a button, with the top and bottom padding set separately from the sides.
Make it a component and fix it
Set the position to fixed and raise the z-index so it stays above everything as you scroll.
Add the open state
Wrap the contents in a holder, add a phone-open variant, and link the hamburger with a click interaction.
BUILD A NAVBAR THAT WORKS EVERYWHERE
One component, with a layout for desktop, tablet and phone.
STICK IT TO THE TOP OF THE PAGE
Fixed position and a high z-index keep it above the page as you scroll.
OPEN A MOBILE MENU ON TAP
A click interaction moves between the phone and phone-open variants.
Animating a Navbar in Framer
Take a navbar component and bring it to life: a mega menu on hover, a start state that animates in on load, and an appear effect that slides it down from the top.
Breakpoints in Framer
Breakpoints are different layouts of the same page for different screen sizes. Set up desktop, tablet and phone so one page works everywhere.
CURRICULUM
WHAT YOU'LL LEARN IN THIS COURSE
In the Ultimate Framer Masterclass, you’ll master Framer from the ground up. Follow real projects, get expert feedback, and finally design and ship the way you’ve always wanted to.
Build a navbar component for your own project, fix it to the top, then add a hamburger variant and wire up the click interaction.
23:20
PUBLISH CHECKLIST
Logo, links and button laid out
Turned into a component
Position set to fixed
Z-index raised above the page
Hamburger variant built
Click interaction tested on phone
TRY IT OUT
Cesar Rodrigues
Founder, Craate Creative
CERTIFICATION
BECOME A CERTIFIED FRAMER MASTER
Earn 3 official certifications that show you don’t just know Framer, but you can
design, build, and execute real pixel-perfect sites.
Rated excellent by 900+ students
4.8
Lifetime access
14-day money-back guarantee
Stream anywhere
