Evenly align nav-links inside mobile nav-menu with 100% height

Hello. Is there a way to evenly vertically align nav-links and their padding , so that the mobile menu would fill 100% of the page and all links are visible?


Here is my public share link: LINK

Anyone?

I just thought maybe I should try dividing each menu link equally by setting something like height:8vh to each nav-link, not sure if it will work, and either way the fonts are not being responsive…how people are making mobile menus filling the entire screen?

Hey. Use vh units for the font as well. Then set a minimum height to the nav-link wrapper to make sure that it doesnt look distorted below a certain height.

–menu wrapper 100vh
|___navlink 8vh or equal height
|____navlink text height to half of the navlink height

Basically use the same units for all you menu elements. Also provide a read-only link your project.

1 Like

Thank you so much, that a great method :slight_smile:

1 Like

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