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