Flyout menu items too wide

Support
#1

I’m having an issue with the width of menu items on smaller desktop screens. Submenus appear to the left and then get cut off the edge of the screen. (See screen cap.)

Client has asked if the menu items can flyout to the right instead. That would probably fix their current issue, but it seems like the menu items should be responsive in this view, and that submenus should resize and/or wrap text. (Everything works fine on mobile.)

What’s the best way to fix this?

Thanks in advance for your help! I love working with the X theme.

#2

Hello There,

Thank you for the very detailed post information. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    left: calc(100% + 1.75em);
    right: auto;
}

Hope this helps. Please let us know how it goes.

#3

Yes, that worked great, thank you!

#4

You are most welcome. :slight_smile: