CODEWITHSUNDEEP
cssmagentomegamenu
wemakeportals
wemakeportals

Reputation: 23

Issue with Mega Menu on Magento

I have 1 Issue with the megamenu on site link

screenshot

Sometimes the menu drop down shifts to right . This happens on both chrome and firefox .

It is not a regular issue it only happens sometimes.

what i assume it may be a css issue becouse when ever it happens and i inspect element with a chrome css extension ..automatically the box shifts to the correct place without refreshing

the megamenu code is attached

$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
    var menucontent = $(this).find(".mega-content-wrap:first");
     var li = $(this);

    if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
        menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
    }
});
$(window).resize(function(){
    setTimeout(function(){
        $('.sns-megamenu-wrap').find('li').each(function(){
            var menucontent = $(this).find(".mega-content-wrap:first");
             var li = $(this);

            if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
                menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
            }
        });
      }, 200);
});

});

The theme is sns korion

Upvotes: 0

Views: 667

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10270

I checked out your css. You are handling your visibility toggle with visibility and opacity. Pick one. In this particular case, I would pick opacity because of the transitions you are running.

Also, your transform css with scale is placing the dropdowns in a different place and using scale to place them in the right place by size. But, contradictory to this technique, you set the transition to none afterwards. This is all a back forth positioning that messes up with the display if the keyframes stop unexpectedly.

SO delete all your transitions in line 6599 in your theme-light-green.css and all your transitions and transforms in line 6462 same stylesheet.

Also remove the visibility in both lines and the opacity in 6599. (you already have it in 6462.

Good luck

Upvotes: 1

Related Questions