site name in place of logo doesn't scale

Hi, I’m using a site name in place of a logo image file. It looks fine for PC screens, but when I check responsiveness (in frontend editor) for tablets and phones, the word wraps rather than the font scaling–the attached file shows screen grabs of how it looks on the 2 smallest devices (in frontend editor).

Another issue with that menu header–the sticky header changes color, which is great and I see how to set those colors. But my site name text changes from the orange you see in attached to yellow, thus invisible on the background I set for sticky header. How do I change that site header text color on the sticky header?

thank you!