My brain is stuck, help me get unstuck. Center nav links vertically in menu. :)

Hi guys! I’m sure it’s very simple, but I can’t figure this out!

I’m working on my website menu that appears when the user clicks on the hamburger menu. Once open, I simply want to vertically center the 4 “Nav Link Wrap” elements within the “Nav Menu” div. My goal is for the nav links to always be vertically centered no matter the screen height (as opposed to just applying padding to the top of the “Nav Menu”).

I tried applying flex box setting to “Nav Menu”, with vertical setting and justify center, but it doesn’t seem to affect the children elements, “Nav Link Wrap”.

I also tried placing all the “Nav Link Wrap” elements inside a div, to see if I could then center the div using flex box applied to “Nav Menu”, but still no luck.

I’m excited to see how simple the solution really is. :relaxed: Any help?


Here is my site Read-Only: https://preview.webflow.com/preview/raquel-pea?utm_medium=preview_link&utm_source=designer&utm_content=raquel-pea&preview=b8ef5a718b67a5d7c5db066869370692&mode=preview

Live Site: https://www.raquelpea.com

Raquel, if u place all “Nav Link Inline” divs inside the “Nav Link Wrap” (make the wrap flex, and 100vh) it should center vertically - is this ok?

1 Like

Yep, that works! Such a simple solution, but I guess it was just one of those moments where I needed to hear it from someone else. Thanks @Ash_Lee !

Great! That was a PEAce of awesome cake… :slight_smile:

1 Like