Inline Navigation Shifting Unexpectedly

[whitemedia]

Hi,

I have a strange issue with a header where the menu and logo suddenly shift towards the top of the screen when the menu is hovered over. I only seem to have the issue in Chrome. It does not happen in Edge or Firefox. I have cleared Chrome’s cache and the website’s cache, but the behaviour keeps returning, usually between 10-60 seconds after page load.

I have checked all levels of the header in case there is a transition effect, but can find no effects at all. It is only the menu and logo which shift position. Any submenus stay where they should be. In the gap where the menu should be I see a flickering duplicate of the top level menu when hovering. The shifted menu is not clickable, only in the gap. Furthermore, if I hover over the logo, all is fine and it brings the menu back to the correct position. It is just if I hover over the top-level menu items that the problem happens.

I hope the below screenshots help describe this.

The header should be positioned like this

This is the header when it goes rogue - note the gap above the submenu and the positioning

More details in Secure Note.

Thanks,
Christopher

[ruenel]

Hey @whitemedia,

Thanks for posting in! I used the Chrome browser and I could not replicate the issue.

• See the images in the secure note.

Please temporarily turn OFF or deactivate the caching plugin and create us a video screencast so we can see what is going on while checking the site in your Chrome browser.

Best Regards.

[whitemedia]

Hi @Ruenel,

Thanks. The cache is turned off. The behaviour definitely is being caused by the navigation’s Primary Particle. When the particle is turned off, the menu behaves normally. When switched on it jumps around as in the video I have sent (Secure Note).

My browser cache has been cleared multiple times, the laptop fully updated and rebooted.

Thanks,
Christopher

[ruenel]

Hello Christopher,

I am using Chrome and enabled the Primary Particle in both Top Links and Sub Links. I wasn’t able to replicate the issue.

• See the images in the secure note.

I disabled it back again by the way. I would recommend that you duplicate this header and then create a Test page. Enable the Primary Particle and leave it there so we can compare if we can replicate the issue using Chrome browser.

Kindly let us know how it goes.