Colossus Mega Menu drop down issue

[lesliekirk]

When you first come to the page and click the button to open the mega menu, the menu opens in the correct location. If you slightly scroll down and click the button to open the mega menu, the menu opens at the top of the page. This also happens if you scroll down the page and then come back to the top, the menu opens at the top of the page instead of "anchored to the nav bar. You can see it here. How do I fix it?

[ids]

Not sure how to fix it because it's losing its position at the top of the container. But the one thing I notice, shouldn't there be a sticky menu when scrolling beyond the main nav?

Scott

[lesliekirk]

Not sure how to fix it because it's losing its position at the top of the container. But the one thing I notice, shouldn't there be a sticky menu when scrolling beyond the main nav?

Scott

They requested it be turned off - BUT the could be part of the issue.

[RTHOMASDESIGN]

They requested it be turned off - BUT the could be part of the issue.

It is. You'll notice that the fasten navigation script is injecting an inline style "top:0;". If they no longer need the sticky header, you can edit the script. Another quick workaround that will work is to use the following rule:
.x-omega-navigation.is-open {
opacity: 1;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
top: auto !important;
}

This declaration is the important part: top: auto !important;

Hope this helps!
-Ryan

[lesliekirk]

It is. You'll notice that the fasten navigation script is injecting an inline style "top:0;". If they no longer need the sticky header, you can edit the script. Another quick workaround that will work is to use the following rule:
.x-omega-navigation.is-open {
opacity: 1;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
top: auto !important;
}

This declaration is the important part: top: auto !important;

Hope this helps!
-Ryan

Thanks Ryan - now they want it back on and I've hunting what I edited to turn it "off" LOL

[lesliekirk]

Hey Ryan RTHOMASDESIGN I've got it turned back on and as long as it's scrolling down the page, it works great. But as soon as it returns back to the top that inline style "top:0;" is inserted. Do I need to go ahead and insert the top: auto !important;? Thanks!

[RTHOMASDESIGN]

No, now that you've reimplemented the sticky header you wouldn't want to use that declaration. The way Colossus is supposed to work, is it will alternate the inline style from "top: 58px (or whatever the sticky element's height is)" to "top:auto" when the user scrolls to the top of the page. In your case it's alternating from "top: 58px" to "top: 0".

You need to edit your omega navigation script. Change the following:
from:
else {
omegaNavigation.style.top = '0';
}

to:
else {
omegaNavigation.style.top = 'auto';
}

That'll fix it.
Hope this helps :)

[lesliekirk]

Hmmmm, the admin is giving me a file not found when I try to edit the source of the omega-navigation.js

[RTHOMASDESIGN]

Huh, I'd just edit via FTP. The file is located here: /Merchant2/themes/colossus/extensions/navigation/omega/omega-navigation.js. If you have further trouble feel free to PM/email me ;)

[lesliekirk]

Huh, I'd just edit via FTP. The file is located here: /Merchant2/themes/colossus/extensions/navigation/omega/omega-navigation.js. If you have further trouble feel free to PM/email me ;)

Thanks again Ryan for all your help! Stupid caching issues....

[RTHOMASDESIGN]

No problem Leslie!! Glad you got it working again :)