This was really annoying me, so I put the following code in my timeless.css:

@media screen and (max-width: 550px) {
    #p-logo-text {
        position: static;
        margin-bottom: 0.75em;
    }
}

Which effectively puts the sitename on its own line above the search box, rather than overlapping the menu icons, for small/mobile screens.
The 550px breakpoint is just from what works for Meta with my setup; I'm not sure it would be suitable in all cases.

User:KPFC posted similar CSS at mw:Skin_talk:Timeless#Issues_with_very_small_screens:

@media screen and (max-width: 500px) {
	//to hide the wiki-logo which is not necessary but overlaps to the echo-badges
	#p-logo-text {
	display:none;	
	}
	.suggestions {
	//to make the suggestions display above all the other content, especially the menu bar under the search bar
	z-index: 100 !important;
	//otherwise the suggestions would cover up the search field, so you can’t see what you typed
	margin-top:50px;
	}
}

Change 428875 had a related patch set uploaded (by Evad37; owner: Evad37):
[mediawiki/skins/Timeless@master] Prevent logo text overlapping icons on small mobile displays

https://gerrit.wikimedia.org/r/428875

Change 428875 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Prevent logo text overlapping icons on small mobile displays

https://gerrit.wikimedia.org/r/428875