Main navigation menu cutoff on small screens

Hey @patrickhs

I’m not entirely clear what’s cut off exactly — I looked at your site on my mobile device, but I don’t see anything cut off.

Could you explain this a bit more please? It will help if you can include a screenshot.

It is non-mobile views only that have the problem. The mobile site works perfect in that respect. I’ve noticed it predominantly in Safari but it is possible to scale any browser down to replicate the issue.

I’m not sure how to directly post an image here but I can link to a screenshot in my google drive: https://drive.google.com/file/d/1k6_vV774MgEbyDWvZoIo-gksQ5e4Q53-/view?usp=sharing

Hi @patrickhs

I see what you mean now. This is expected behavior — the menu itself has a specific height (375 pixels for the submenu), so if the browser is smaller than what the menu contains, it will be cut off. There’s just not enough room to fit everything in it.

One way to solve this would be to make the font/spacing smaller, which you can do with this CSS code:

#page .main-navigation ul.sub-menu li a {
  font-size: 12px;
  padding: 4px 10px;
}

Thanks for the suggestion. I do appreciate your follow up.

Unfortunately, this solution would degrade UX for 100% of users in order to correct an issue that only occurs with a very small minority of users. It seems like maybe this is something we’ll need to solve with a more robust plugin or something of that nature at a later date.

After exploring options such as what you suggested and similar css based work arounds I am good to just call this a design limitation and move on. Probably affects less than 2% of our users anyhow so I can live with that for the time being.