Streaming live at 10am (PST)

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


#1

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


#2

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?


#3

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.


#4

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


#5

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