Interaction Involving Two Elements

[ngdesign (NG)]

Public Share Link: https://preview.webflow.com/preview/vizzit?preview=3fbc55edb21a68d517ee3722a00cbe9f

(homepage) Circular Menu Bar: Can someone please advise me on how to best ensure that the lines in the circular menu bar are aligned and evenly spaced? I tried making them columns but that didnt work so well. I also want them to be left justified which doesnt seem to happen even when I select left justify. Also at the end, or the middle of the interaction of the circle moving on and off the page, I want the off white letters to fade to black. I couldnt figure out how to do this without creating a seperate interaction but it seems tricky to get the timing right. Please advise.

---

Here is my public share link: https://preview.webflow.com/preview/vizzit?preview=3fbc55edb21a68d517ee3722a00cbe9f
(how to access public share link)

[Waldo (Waldo Broodrÿk)]

Hi @ngdesign great question! I would recommend that you position the circular menu using Absolute or Fixed positioning in the top right hand corner, and give it Flexbox styles as shown here to center and vertically align your links inside of it: https://flexbox.webflow.com/#verticalcenter

You could use a div block with set width/height, a black background color and 100% border radius rather than an image for the circular nav as well.

[ngdesign (NG)]

Thanks @Waldo any thoughts on how to get the menu items to fade out with the interaction as I mentioned earlier? That part Im really struggling with.

[ngdesign (NG)]

Can anyone help with this?