How to make a responsive logo from long text to short text or CSS image?

Question

css

Good day, comrade Wise Men :)

The essence of my question:
The menu contains text instead, for example - Pirozhenki from St. Petersburg, how to make it so that when the screen is reduced, instead of this long text, there is a smaller text - PiP, for example, or a company logo, in the form Pictures?

Thanks a lot, sorry if the question is too simple :)

Answer 1

There are many ways, but I like this trick.

Answer 2

@media (max-width: 600px) {
  сss мобильной версии
}
@media (min-width: 600px) {
  сss десктопной версии
}

Media Queries