MegaMenu going off screen

There doesn’t seem to be a simple JS check whether a megamenu panel is outside of the window boundaries.

It should have 3 conditions: offset left, offset right and offset both sides. If it’s offset on the left, then the megamenu should display on the right. If it’s offset on the right, then the megamenu should display on the left. If the megamenu cannot fit on either side, then align it to the middle of the menu item.

*JS:*

(function($) {

    $(window).on( 'elementor/frontend/init', function() {

        $(window).on('load', function() {
            $('.elementskit-megamenu-panel').each(function() {
                $(this).css({
                    'left': 'auto',
                    'right': 0,
                    'transform': 'none'
                });

                megaMenuOffScreen( $(this) );
            });
        });

    });

    function megaMenuOffScreen( $this ) {
        let viewport = $(window).width();
        let offsetLeft = $this.offset().left;
        let offsetRight = $this.offset().left + $this.width();

        if ( offsetLeft < 0 ) {
            $this.css({
                'left': 0,
                'right': 'auto',
                'transform': 'none'
            });

            offsetRight = $this.offset().left + $this.width();

            if ( offsetRight > $(window).width() ) {
                $this.css({
                    'left': '50%',
                    'right': 'auto',
                    'transform': 'translateX(-50%)'
                });
            }
        }

        if ( offsetRight > $(window).width() ) {
            $this.css({
                'left': 'auto',
                'right': 0,
                'transform': 'none'
            });

            offsetLeft = $this.offset().left;

            if ( offsetLeft < 0 ) {
                $this.css({
                    'left': '50%',
                    'right': 'auto',
                    'transform': 'translateX(-50%)'
                });
            }
        }
    }

})(jQuery);

*Megamenu settings:*
– Custom width: 800px
– Mega Menu Position as: Relative

• This topic was modified 2 years, 4 months ago by mapsmarketing.
• This topic was modified 2 years, 4 months ago by mapsmarketing.
• This topic was modified 2 years, 4 months ago by mapsmarketing.