search

soflyy / oxygen-bugs-and-features

Bug Reports & Feature Requests for Oxygen
https://oxygenbuilder.com/
315 stars 31 forks source link

Composite element "Mega Menu" breaks when using sticky header - includes fix. #3542

Open albert-sun opened 1 week ago

albert-sun commented 1 week ago

Any bug report that doesn't include a Sandbox link or replication steps will be closed. If you can't provide these pieces of information, we're happy to help you via our official support channel instead: https://oxygenbuilder.com/support. You need to select "Something's broken and I need help" from the dropdown box on the left.

Describe the bug Composite element "Mega Menu" breaks offset when using sticky header.

A link to a Sandbox site where the bug has been reproduced https://oxygenbuilder.com/try? (REQUIRED) https://oxygen-qw6lyzw94sd9.oxygen-demo.qsandbox.org/home

IF YOU CAN'T PROVIDE A SANDBOX REPRODUCTION: Steps required to reproduce the bug:

  1. Load the page normally
  2. Hover over the mega menu labeled "Original Menu" - note that the mega menu position is correct.
  3. Scroll down a few times.
  4. Hover over the stickied mega menu again labeled "Original Menu" - note that the mega menu appears too far down.

How to fix the bug: The bug is caused by where the mega menu is being placed during its "open" animation. When the sticky header is scrolled down, the value of jQuery(header).offset().top within the "Mega Menu Code" block JS (line 21) increases of remaining constant. By subtracting jQuery(window).scrollTop() from the assignment to bottom, you can fix this behavior.

The new assignment will look as follows: var bottom = jQuery(this).offset().top + jQuery(this).outerHeight(true) - jQuery(window).scrollTop();

I can't do a side by side comparison because the mega menu code blocks overlap each other, but if you replace Line 21 in the Mega Menu's code block's JavaScript with the above - then the issue will be fixed.

albert-sun commented 1 week ago

Another tiny issue only if you're logged-in as an admin, if you have the WordPress admin header showing (i.e. you're logged-in) then the mega menu wrapper is offset downwards by the height of the header. This can be fixed by subtracting the body offset from the top header: 

var html = jQuery("html")[0];
[...]
var bottom = jQuery(this).offset().top + jQuery(this).outerHeight(true) - jQuery(window).scrollTop() - jQuery(html ).offset().top;
albert-sun commented 1 week ago

Looks good - just make sure there aren't multiple Mega Menu code blocks sitting around or they'll interfere.