Имеется следующий код:
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: PT Serif, serif;
}
h1,
h2,
h3,
a {
font-family: Proxima, sans-serif;
}
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: 25% auto;
}
.sections-menu,
.main-content {
font-size: 1em;
}
.sections-menu {
color: snow;
background-color: #3f59ae;
grid-row: -1;
display: flex;
}
.sections-menu ul {
margin: 30px;
list-style-type: none;
}
.sections-menu ul li {
margin-bottom: 15px;
}
.sections-menu ul li:last-child {
margin-bottom: 0;
}
.sections-menu ul li a {
text-decoration: none;
color: snow;
font-size: 1.5625em;
}
.main-content {
background-color: snow;
grid-column: -2;
color: black;
padding: 10px 20px;
}
.main-content h1 {
text-align: center;
font-size: 2.5em;
margin: 15px auto 30px;
}
.main-content h2 {
text-align: center;
font-size: 2em;
margin-bottom: 15px;
}
.main-content #examples {
margin-bottom: 30px;
}
.main-content h3 {
font-size: 1.5625em;
margin-bottom: 15px;
}
.main-content p {
font-size: 1.25em;
margin-bottom: 25px;
}
@media screen and (max-width: 980px) {
.container {
grid-template-columns: 33% auto;
}
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 100%;
grid-template-rows: repeat(2, auto);
}
.sections-menu {
width: 100%;
grid-row: 1;
position: fixed;
}
}
При разрешении экрана 768px меню перемещается вверх и становится фиксированным. Однако при попытке перейти по ссылке-якорю меню перекрывает часть контента. Пробовал :before перед соответствующими частями контента, также пробовал вставлять блок, совпадающий по высоте с меню, перед контентом, однако не помогло. Как решить данную проблему?
Код полностью: https://codepen.io/sasha_jarvi/pen/oJOXZO