Nav Logo in the middle and menu options on both sides

Design help General
1

Looking to make a nav bar just like this:

I could make this from scratch and have it work on desktop BUT I want all my navigation links from both sides of the logo to appear under a single menu dropdown when the menu button is clicked on mobile devices. This doesn’t appear to be possible when dropping in a basic Nav Bar Element onto the canvas

Hope someone here can show me how this can be built in webflow.

2

Hi Ian,

there are a couple of ways to approach what you want to achieve.

One way is to create a NavBar from scratch with interactions for the Mobile viewport. You could achieve the single menu drop-down by wrapping ‘Left’ and ‘Right’ Nav links (also in a wrapper) within a vertical Flex div.

The other option to use, if you prefer to use the Webflow Navbar component, is to have 2 Navbar’s. The 1st make visible on Desktop Only, the 2nd visible on all other viewports.

Both options will require some work to implement, just depends on what your preference might be.

Hope that makes some sort of sense?
Keiran

3

Hi Ian,

Fellow Webflow designer @Aaron has made a beautiful and clonable library with this kind of elements available:

Buy him a coffee :wink:

2 Likes
4

I do love coffee :stuck_out_tongue_winking_eye: :coffee:

1 Like