Как сделать так, чтобы фиксировано с позиционированный элемент не перекрывал контент?
Есть сайдбар-навигация .navbar со свойством position: fixed и этот элемент перекрывает собой основной контент сайта. Как сделать так, чтобы он его не перекрывал? Я пробовал играться с z-index, но результатов это не принесло
Весь код jsfiddle.net/dxk3wjc1/
Сам сайт http://cc48161.tmweb.ru/
.navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 50%;
transform: translateY(-50%);
max-width: calc(1800px - 105px);
width: calc(100% - 105px);
}<nav class="navbar">
<ul>
<li>
<a href="#" class="arrow up"><i class="far fa-arrow-alt-circle-up"></i></a>
</li>
<li>
<a href="#main" class="dot active" data-scroll="main">
<span>Главная</span>
</a>
</li>
<li>
<a href="#features" class="dot" data-scroll="features">
<span>О нас</span>
</a>
</li>
<li>
<a href="#services" class="dot" data-scroll="services">
<span>Услуги</span>
</a>
</li>
<li>
<a href="#sequence" class="dot" data-scroll="sequence">
<span>Порядок работы</span>
</a>
</li>
<li>
<a href="#stages" class="dot" data-scroll="stages">
<span>Этапы работы</span>
</a>
</li>
<li>
<a href="#portfolio" class="dot" data-scroll="portfolio">
<span>Портфолио</span>
</a>
</li>
<li>
<a href="#news" class="dot" data-scroll="news">
<span>Новости</span>
</a>
</li>
<li>
<a href="#contacts" class="dot" data-scroll="contacts">
<span>Контакты</span>
</a>
</li>
<li>
<a href="#" class="arrow down"><i class="far fa-arrow-alt-circle-down"></i></a>
</li>
</ul>
</nav>