Support » Theme: Storefront » Main navigation menu cutoff on small screens

  • Resolved patrickhs

    (@patrickhs)


    This is a site wide issue where the Shop menu (or any other with enough height) is cutoff on smaller non-mobile screens. If there isn’t enough vertical space on the screen between the header and the fold then the parts of the menu that fall below the fold are completely inaccessible. Does anyone know if there is a simple fix for this?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    Thread Starter patrickhs

    (@patrickhs)

    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;
    }
    Thread Starter patrickhs

    (@patrickhs)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Main navigation menu cutoff on small screens’ is closed to new replies.