How to accomplish this floating navbar

Design help Animations & Interactions
1

Hi, I am in the process of updating my portfolio website and would like to incorporate a sticky, floating nav bar with a dropdown. I have it designed and built as a figma prototype, but not sure how to create the same thing in webflow. See figma prototype link below.

Thanks

Here is my public share link: https://www.figma.com/proto/Cb0bkL9h5XZxG1jph9KSrE/Portfolio?type=design&node-id=1538-1723&t=mwRHAMGViiaFuCda-1&scaling=scale-down&page-id=1538%3A1722&mode=design

2

Try this:

  1. Drag a Navbar element from the ‘Add Elements’ panel (plus sign icon on the top left) into your body or section on the canvas.

  2. Go to the Style Panel on the right-hand side. Under the Position category, select ‘Fixed’. This will stick your Navbar at its location. From the dropdown below, you can select whether you want it to stick at the top, bottom, or sides. If you’re planning to have it at the top, select ‘Top’.

  3. Drag a Dropdown element from the ‘Add Elements’ panel into your Navbar. Click on the Dropdown you just added. It will show a Dropdown List. You can add Dropdown Links to this list.

Let me know if this is helpful!

3

Thanks! Do you know how to make the dropdown expand the navbar height instead of just being overlaid on top?

NVM figured it out thanks!

1 Like