Streaming live at 10am (PST)

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....


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.


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


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


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


@VladimirVitaliyevich awesome thank you!

closed #12

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