Several columns in mobile NavMenu

[radmitry (Dmitry Ra)]

Hi everyone.

I’ve created mobile menu setting navmenu to 100vh and equaly divided each navlink to a vh so it always takes full screen and fonts are resized accordingly. It works great but in mobile landscape mode the font either is too small or I can’t see all of the links on the screen if I disable the VH.

So I thought maybe I can set the nav-links in two columns (only in mobile landscape mode). However there is a problem that nav-links can only be inside a nav-menu container and I can’t put put links inside columns or divs.

Any suggestions?

---

Here is my public share link
Please go to the Home page to see the mobile menu

[radmitry (Dmitry Ra)]

Pretty please? someone…

[RickK (Rick Koston)]

I’m looking at this but I’m not seeing your issue. It’s readable in all display modes.

[radmitry (Dmitry Ra)]

Hi, Rick. Thats because Webflow’s mobile landscape screen is quite tall, if you’ll open up menu at http://rcbl.webflow.io/home on the mobile phone in the landscape mode you’ll see that the “contact us” nav link is being cut out. Thx

[radmitry (Dmitry Ra)]

Even Safari’s responsive mode is showing it. But the main issue for me is that text is kinda small in the landscape, would be more comfortable to have the links larger in 2 columns.

[RickK (Rick Koston)]

Ah I see… Please hold

[RickK (Rick Koston)]

This is strange. The flex isn’t wrapping to a second column. The only way I could get it to work was to set the menu-link class to inline block and width:50%. Which then in turn breaks the flexbox for keeping items centered vertically and horizontally.

[radmitry (Dmitry Ra)]

Yes, I also was trying flexbox with no luck, which is also strange for me.