▼
Streaming live at 10am (PST)

Several columns in mobile NavMenu

#1

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

#2

Pretty please? :slight_smile: someone..

#3

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

#4

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

#5

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.

Screen Shot 2016-09-28 at 23.17.10.png689x586 114 KB

#6

Ah I see... Please hold

#7

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.

#8

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

#9

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