How to get a nav like this?

I’m trying to recreate this site in Webflow but I am having trouble re-creating this nav… Can someone help? Any advice on exactly how to do this?

Hello, @Quantumgo

Do you mean vertical or horizontal navigation?

@sabanna I mean like with the logo in the middle and the nav buttons half on one side and half on the other. Here’s how I have it set up so far but when I make the screen smaller half the nav disappears…

https://preview.webflow.com/preview/flowers-on-the-park?preview=de106b47e22fe92b6a4a9549362e0420

Ok, I understood what you are trying to do.

It is how I would do this:

  1. Change navlinks to regular link-blocks+text nad give them the same class (navlink)

  2. Leave only 1 navmenu and make it width: 100%

  3. Add row with 3 columns to navmenu

  4. Move first 3 navlinks into the first column and second 3 navlinks into the last column, middle column will stay empty.

  5. Make navdiv position:relative and logo link position: absolute, then put logo link in the middle.
    You would get something like this:

  6. Then, for the tablet and smaller devices, make navmenu position: absolute, row make stuck in one column and all navlinks display: block. Then you will get something like this:

Hope I was able to explain.
Cheers,
Anna

1 Like

@sabanna oh thank you so much! I feel like such a beginner still but there’s so much different situations you can come up with! You are such a life saver!:+1:

1 Like

You are welcome :slight_smile: Sometimes crazy ideas may save situation too :wink: :smiley:

1 Like

@Sabanna Another question since you are super helpful! On the website I am recreating there is a cell phone that flips when hovered over. How can I achieve this as well? Is there a way to turn the phones sideways like the website without editing them in a photo editor?

To have it flip you could do it with interactions. To have it open like a flip phone would be 3D animations. :wink::+1:

@VladimirVitaliyevich there’s 3D Animations on Webflow? :open_mouth: How would I do that?

Yup. Watch the tutorials. There’s too much for me to explain all the things you could do. Here’s an intro. :wink::+1:

3 Likes

@VladimirVitaliyevich awesome thank you!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.