How to Make a Responsive Navbar in Framer

Step 1 - Create Some Basic Components

Before we get started, we need to make a couple of components that will reside inside the navbar. One is the logo which is optional and the other is the hamburger menu. After creating this, you can begin creating the actual navigation.

Step 2 - Create The Navbar Base

The base of the navbar is a fixed height, horizontally stacked container with 3 parts. The idea is simple. When its in desktop mode, it will be horizontally stacked and when its in mobile mode, it will be vertically stacked

Step 3 - Add Content Inside the Skeleton

This step is the most crucial step of this entire tutorial. The button container and the link container are straightforward. However the key to making it responsive lies in the first logo container. The logo container should contain both the logo and the hamburger menu. We will remove the hamburger menu later and will make sense it the next step as to why its there in the first place.

Step 4 - Create a Mobile Variants

1. Now create mobile variants for both closed and open state

2. Vertically stack the parent container with height set to fit

3. All the children layers should have width set to fill and height set to fit

4. For the logo container, ensure that the spacing has been set to "Space Between"

5. Change the hamburger component to close in the open variant

6. This step is optional but you can set min and max height to 100 view to ensure that it takes up the entire screen size on open

Step 5 - Add Transitions

Now add "on click" connections to the menu icons for both closed and open variants

Step 6 - Clean Up & Add to Page

After the transitions and interactivity is set up, you can remove the hamburger menu from the desktop variant. Finally, you can add the component to your page and set the width to a 100% and position as fixed. You can optionally set the mobile logo variant to just the icon to make it cleaner.

Additional Info

This tutorial just covers the basics of making this responsive. Feel free to experiment with different positions & alignment. If you want to remix the file, you can do so here.

If you're looking for video walkthrough, you can check out these videos by Nandi and Benjamin. For custom navigation components, check out our UI kit or component library