Mega menu not working same in all browser and breaking responsiveness

Question

I'm having a very strange issue with my portfolio website. In Google Chrome browser everything working smoothly, there is no problem. But in other browser like Firefox, Microsoft Edge, Opera Mini, the mega menu is breaking responsiveness.

https://www.nockscript.com/ Go to the website, You'll find a menu called "My Creation" hover it using Chrome browser and check the preview. Do the same thing with Firefox or Microsoft Edge, You'll understand what's the problem.

Note: I'm using WordPress platform, This mega menu comes form theme default design. I want the mega menu preview will show same in all browser as like Chrome browser showing.

Answer 1

In chrome, a javaScript is setting the width of the megamenu to 100% of the available screen size. But for some reason, it's not working in Firefox.

Since you have cache plugins enabled, it's not easy to trace the problem in minified js files. But for sure the problem is in this file:

neuron-core-kyoto / assets / scripts / elementor_{something}.js

You should first disable cache and minify, then find this code inside the above file:

$subMenu.css({width:width,left:offset})

Then trace what's the value of width and offset and also check if this piece of code is even running in FireFox or not.

---

Update:

I've checked your code. It's trying to calculate the width of the page by this:

var width=$elementorContainer.outerWidth()-columnPadding*2

The problem is made by columnPadding which is extracted with the following code:

columnPadding=parseInt($menu.parents('.elementor-column-wrap').css('padding'))

The problem is that when you get css('padding') in Firefox, it returns "" and in Chrome, it returns "0px". Then parseInt will convert it to "NaN" in firefox and "0" in Chrome. So the CSS code is not applying in FF.

I've changed the padding to check if the problem is with 0 padding, but its behavior didn't change in Firefox. The thing is that css('padding-top') or padding-left, padding-right, padding-bottom are working fine in Firefox.

I've checked this on other sites as well and the same thing was happening there.

I've also found:

https://github.com/jquery/jquery/issues/3383

Answer 2

You need to remove position: relative; on the following classes and set position:unset instead:

.elementor-element-f666f66,
.elementor-element-f666f66 .elementor-column-wrap,
.elementor-element-f666f66 .elementor-column-wrap .elementor-widget-wrap,
.elementor-element-f666f66 .elementor-column-wrap .elementor-widget-wrap .elementor-widget{
    position: unset !important;
 }
 .m-nav-menu--horizontal ul li.menu-item.menu-item-has-children > ul.sub-menu{
    top: 0 !important;
 }

So actualy firefox is respecting the rule of position relative to keep width of the container