Sub-Menu Items Going Off Screen

coltrucker

Hello, on my website I have a menu with subitems. On the submenu, when an item is near the right edge of the screen, it just expands outward to the right beyond the viewport of the screen.

Link: https://moffittservices.com/

For example: Hover over the Locations item, then hover over the Cypress, Texas item, then hover over Fuel Services in Cypress item. The sub-items will keep going right, but they should be wrapping to the left instead of going right. This doesn't happen on ultra-wide screens to please view it on a viewport of 1240px.

There should be a way to have the items wrap on the other side (left side) if the screen is not wide enough. This used to be a feature in BeTheme, but it looks like it is not working if you have a "Header Template" selected for your menu structure.

Please advise a fix for this, hopefully some forgotten CSS is all that is needed.

Thank you,

Phil

Hi,

I have passed this to the dev team, and we will add this feature in future updates.

For now, please use the following CSS code:

.mfn-header-menu .menu-item:last-child .sub-menu .sub-menu{
 left: unset!important;
 right: 100%!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next