I have an issue where my left menu container is filling the entire width of the screen until after a specific point in the loading process, and then the menu shrinks to the correct size and the body shifts up the page to fill the newly available space left by the shrinking menu.
I've tried addressing this through editing the css but have had no luck
The site uses bootstrap and I think that the problem is related to bootstrap, but haven't been able to pinpoint the exact issue,
One of the .js files (main.js) seems to be associated with the issue, when I disable this .js file in chrome dev tools, the menu stays the full width at the top of the page (full width is not desired) and then when I re-enable main.js and reload the page the menu eventually does shrink to the correct size, but again has the unwanted effect of the menu filling the page, and a second later shrinking to the desired size.
As a result my page is failing the Content Layout Shift (CLS) test, so now I am looking at work arounds that might hide the page or prevent paint until after the point where the content layout shift happens.
Any suggestions? I'm really scratching my head at this point