Submenu Getting Clipped in Mobile

Community Forums Forums Design Tips and Tricks Submenu Getting Clipped in Mobile

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  Robodashy 1 year, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #56215



    It would probably be easier to explain this with a visual…On a regular desktop, let’s say that you right-click your mouse, and you are too close to the margin, the submenu automatically opens toward the ‘inside’ of the screen – where there is more room.

    On a desktop. when you hover over a primary menu item, and If you have multiple items for each submenu item, and you then rollover on those items, a secondary submenu opens to the right. So on a regular pc this is no problem.

    When you get to mobile, those submenus that are created on the right get clipped off. It almost makes me want to ask how to force that submenu to open to the left. But I don’t think that is the correct solution.

    I think a submenu should open to the ‘inside’ on mobile (not always in one direction or always to the right).

    I have been working with Legacy, but I have a feeling this would be the case with any other child theme. Is this a Genesis limitation, a mobile platform constraint, or is this just the way it works on mobile?



    • This topic was modified 2 years, 3 months ago by  windy.
    • This topic was modified 2 years, 3 months ago by  windy.


    I see you posted this a while back, so I hope you got your issue resolved. If not, come back and check in, and I’ll escalate it for you…

    Susan @ One Happy Studio I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts



    Hi windy and Susan.

    I’m having a similar issue where I’m wanting to align the submenu of my last li to the right, so it doesn’t stick out over the right side of the main body (well, at least I think this is a similar issue to what windy is describing).

    I’ve looked at different ways of modifying the css to fix this, but can’t seem to find the right selectors to modify to get this effect.

    The effect I’m after can be seen working here: (the “Support” menu item under the search and social buttons)

    From looking at the CSS it looks like this is achieved by: #menu-item-31 > ul.sub-menu {
    left: auto; right: 0;

    I can’t find the equivalent styles in the Genesis css (modifying the hell out of the Sample child-theme) to make these changes.

    Any help would be greatly appreciated.

    The large print giveth, and the small print taketh away.
    – Tom Waits, “Step Right Up”

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.