A night or two ago in chat, it was brought up I think by Takeru, that this very Guildwork site is, well, straight up impossible to use from a mobile phone, due to the navigation bar taking up 80% of the screen.
This has bothered me a lot in the past as well, forum addict that I am, so I'd like to see it fixed. I happen to have professional experience in this area, however, I'd prefer to advise rather than execute. One reason is that I try not to take any more energy off my business than I already do by playing this game, or to give work away. I also haven't hardly coded anything in the last 6 months because of management reasons. I would also hate to take away a potential learning experience from someone who could use it. (I'm already level capped ;P)
So, any CSS ninjas, aspiring ones, comment below and we'll work some magic!
Anyway, the way to fix this is to edit the site's CSS (wherever that is), and create a mobile breakpoint with a media query of max-width: 420px or so. In this breakpoint, top level nav links have to be laid out vertically or block-level. Second level (such as under "The Game Stuff") will be tricky, but can probably be laid out the same way to the right of the top level links, or under the bottom of that particular top-level link. Finally, the entire nav menu should be hidden at this breakpoint, and a "hamburger" or other icon/button with a label added to toggle it visible. When visible, the nav menu can be overlaid on the page content. Another option is to use the off-canvas menu technique. If we can make the text at this breakpoint smaller, or tighten spacing, that will probably help fit it all in the space of an average phone.
If you know what any of those words mean, let me know :) Also, if there are other concerns with the site that aren't fixable by Momo, note them below.
I took some time today to make some simple changes. It's not a perfect fix, but it should prevent the navbar from being a problem on mobile, at least for now.
Natsuki Esper replied
570 weeks ago