Flex not affecting Nav Menu element

Hi guys,
I am applying Flex to the nav menu to position the elements inside centered,
but the flex doesn’t seem to be working, and the element inside is aligned at the top of the page which I don’t want it to be.
by the element inside, I mean “nav button wrapper”.

Here’s the screenshot of the current page.

I’d greatly appreciate it if anyone could give me some tips to solve this problem!

Screenshot 2020-05-06 15.01.32|690x378

Here is my site Read-Only: LINK

Can you please provide your public link?

1 Like

Here’s the public link.

I forgot to mention but I want the nav button wrapper to be “vertically” centered to the Nav Menu.

what I meant is Please provide your read only link. Share a read-only link | Webflow University

Here you go.https://preview.webflow.com/preview/juris-fresh-project-fe38fc?utm_medium=preview_link&utm_source=designer&utm_content=juris-fresh-project-fe38fc&preview=0b628d7e21be248328b1fc2bb4842512&pageId=5eb21e82c06242eaef7b2b8c&itemId=5eb21e82c0624282df7b2bee&mode=preview

Flex only works on direct children elements. Your dynamic list is a grid layout and flex is applied 2 parents above. Can you explain more about what’s wrong and what you’re trying to do?

I am applying flex to the element named Nav Menu to vertically center the element named Nav Button Wrapper, which is a direct children of Nav Menu. For now, I added a top margin 220px to Nav Button Wrapper, just to make it look like it’s vertically centered. But ideally Nav Button Wrapper wiil always be vertically centered to Nav Menu without having specific margin in any screen size. Please let me know if you need more detailed explanation.

Hm. I removed auto margin from nav menu wrapper, and now it’s aligned at the top…

For the background video, the owner of this site wanted it, but I’ll try to discuss it with them!

your read only link no longer works, can you repost it?

yes, this one!

I see you got the flex to work. Is that it?

Currently nav button wrapper has 35vh top margin so it looks like it’s vertically centered to the nav menu, but when I remove the top margin, it’s still stuck to the top.

I’m not sure why it’s not working but if you add a wrapper div just above the menu element and set it to absolute, full and apply flex to that, it works fine.