Body text can be scrolled over left menu on smaller screens

Hello all,

I asked the same question a while ago, but since I actually published the website online now, I thought I’d give it another try. The website can be found at

On all pages, except the homepage, I have a menu on the left (#secondary) that is in my child CSS as:
‘#secondary {
clear: both;
display: block;
padding: 0px 0;
position: fixed;
top: 130px;
font-family: Baskerville, “Playfair Display”, “Times New Roman”, serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 100;
}
‘

I have the position fixed because it would show up under the body text otherwise.

This looks nice on normal sized screens or big ones, but on smaller screens (e.g. smartphones), it results in the possibility that users can scroll the content over the menu. Does anyone have an idea how I can fix the content of the website in a way so that it won’t overlap the menu when scrolling on a small(er) device?
Thanks!