Липкое navbar-меню (sticky-top) перекрывает верх блока при прокрутке

Всем привет!

Создала при помощи bootstrap липкое меню:

 <header class="sticky-top">
  <nav class="navbar navbar-dark navbar-expand-lg scrolling-navbar">
    <div class="container-fluid">
      <a href="index.html" class="navbar-brand">
        Mamalepila
      </a>
      <button class="navbar-toggler ml-left mr-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto text-left">
          <li class="nav-item">
            <a href="#project_info" class="nav-link">О ПРОЕКТЕ</a>
          </li>
          <li class="nav-item">
            <a href="#section_works" class="nav-link">ЛЕПИЛКИ</a>
          </li>
          <li class="nav-item">
            <a href="#contacts_block" class="nav-link">КОНТАКТЫ</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

И при помощи jQuery сделала плавную прокрутку до якоря:

  <script type=text/javascript>
$(document).ready(function(){
  $("a.nav-link").click(function(){
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 1000,
      easing: "swing"
    });
    return false;
  });
});

Всё работает, но при клике на пункты меню и прокрутке, то самое липкое меню перекрывает верхушку раздела, на котором висит якорь, заголовки не видны, они оказываются под липким меню.

ВОПРОС: как с помощью CSS или внесения изменений в jQuery сделать так, чтобы липкое меню не перекрывало верхнюю часть блока при прокрутке?

Всем заранее спасибо!