Odd: changing color of announcement bar wrecks mobile

Site URL: https://heartpainter.com/

After I changed the background color of the announcement bar (because black looked kind of harsh), I encountered huge problem in preview modes (tablet and phone) and in real life tests. On tablet, (Samsung Tab A 10.1 S pen), switching from vertical view to landscape view made everything in the design wrecked -- I didn't take a screen shot, but some nav links overlapped others, there was basically no organization among blocks. In mobile, clicking on a menu item did the same even in vertical view. It was just luck, since I'd made a lot of changes today, that I tried changing the announcement bar back first. That fixes it.

However...I don't see why...seems as if the background color of the announcement bar should have zero effect like this. Ideas?

Have you found the solution yet?

I just left the announcement bar the standard color. Everything works as long as I do.

Ah. Problem came up again -- from mobile menu to landscape view wrecks the site (overlapping text, blocks messed up etc.)

Luckily I also noticed, checking the site on my tablet, that by fixing the sidebar I made the site more convenient on desktop, but made it impossible to see scroll down to see some of the secondary nav. When I unfixed the sidebar, the mobile menu to landscape now works fine. It's possible that this was my problem all along. Not sure. 

Can you fixed sidebar & share site url + access password? We can take a look.

It's OK. I realized that setting the sidebar to fixed is not good for mobile. And making the site great for mobile viewers takes priority.