Streaming live at 10am (PST)

How to get a nav like this?


#1

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?

http://flowersonthepark.com


#2

Hello, @Quantumgo

Do you mean vertical or horizontal navigation?


#3

@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


#4

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


#5

@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:


#6

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


#7

@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?


#8

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


#9

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


#10

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

http://3d-transforms.webflow.com


#11

@VladimirVitaliyevich awesome thank you!


#12

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