Top bar header over left bar shifts on page reload

[WaggingLabs]

I’m using a sticky top bar header positioned over a left bar. The CSS used to shift the top bar left and position it over the left bar was working until recently. Here’s a screen recording

I removed some unnecessary CSS and was able to position the header as needed by adding $el { left: 0px !important; width: 100vw !important; } to the top bar element CSS. I can’t seem to correct the movement on page load.

[prakash_s]

Hello @WaggingLabs,

Thanks for writing to us.

I tried to access your site and site dashboard but it requires a popup login I would suggest you disable the security plugin or share the popup login details so that we can check it on our end and guide you properly.

Thanks

[WaggingLabs]

apologies! I’ve added the popup login credentials to the secure note.

[ruenel]

Hello @WaggingLabs,

Try to disable the Global Container option in your Bar element and then set the width to 100vw like this:

Kindly let us know how it goes.

[WaggingLabs]

I changed the bar content width to 100vw and was able to remove the additional element CSS. Unfortunately, this did not eliminate the header shift that usually occurs on page load.

Sometimes caching eliminates the shift, but it happens enough among the services pages that I’d like to resolve. I’m using the same left navigation for another site and it has the same issue.

I appreciate your help!

[WaggingLabs]

Hey Themeco, might you have additional advice to eliminate the top bar shift?

I realize this message may drop my request in the queue, but I wanted to make sure the request remained open.

[ruenel]

Hey @WaggingLabs,

The Top bar is positioned as Relative. The Left Nav is positioned as Fixed. The sudden shift delay upon page loading is because of the styling of the navigation not fully loaded on the page. Also, one of the reasons why the issue is intermittent.

Thanks.

[WaggingLabs]

Hi @ruenel,

Do you know of a workaround even if that means additional work on my part to update these?

I don’t believe this would have passed QA and gone to production for two years with the header shifting.

Thanks

[marc_a]

Hey @WaggingLabs,

I’ve checked your website and it seems that you’ve already figure it out because I cannot see the issue anymore based on the video provided. You can also check the my testing in the secure note.

Thank you.