Creating a Shifting Nav Bar

Hey guys,

I’ve been racking my brain on this one trying to recreate this nav bar in Webflow but so far to no avail. Wanted to see if anyone had any ideas on how to achieve this style created in Framer within a Webflow site.

As you can see, there are 5 original separate buttons at the bottom, when hovering over the middle, it expands a larger menu with anchor points. Additionally, when you reach the bottom of the page the 3 dots shift into an arrow, allowing you to click it and return back to the top of the page.

Any help with this would be much appreciated! I personally think this is an amazing use of a Navbar and would be a great addition to many different designs.


Here is the link to the reference NavBar : https://www.marsrejects.com/

Images before you go to the website:
Screen Shot 2023-06-08 at 3.27.31 AM
Screen Shot 2023-06-08 at 3.27.48 AM

Hey Gavin @g4av1n,

have a look at the following five cloneables from the Webflow community.

These might be a good starting point for what you’re trying to achieve.

Let me know if this helps.

Hey @choreus,

Thanks a lot, I went through these.

It seems like the first and second have the closest effect, but are both custom coded.

I was able to find the remix link on Framer which shows the animations/interactions etc. that this designer used to get this effect without any custom code. I’m wondering if this can be achieved within webflow as well without needing to use custom code.

Here’s the link where you can go into Layers & Assets to see how it was constructed and animated. I do believe you need an account on Framer to view this though. That being said, it’s completely free.

https://t.co/qmsaNfDcDC