FullCalendar 5 with Sticky Resources Under Top Menu with Bootstrap 4

I'd like to be able to use Bootstrap 4's sticky menu in conjunction with Full Calendar 5's sticky resource headers. When scrolling down, I'd like the bootstrap menu to remain at the very top, followed by the resource headings (i.e. "Room A", "Room B", etc.) from Full Calendar directly underneath. It looks like Full Calendar does have a sticky resource headings feature, but the feature only sticks to the very top of the page and is not visible because of the Bootstrap menu.

Here's a what I have so far:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" type="text/css" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet" type="text/css" />


</head>

<body>

  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

  <main role="main" class="container">
    <div id='calendar'></div>
  </main>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
  <script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js" type="text/javascript"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      var calendarEl = document.getElementById("calendar");
      var calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: "bootstrap",
        initialView: "resourceTimeGridDay",
        dayMinWidth: 200,
        height: "auto",
        resources: [
          { id: "a", title: "Room A" },
          { id: "b", title: "Room B" },
          { id: "c", title: "Room C" },
          { id: "d", title: "Room D" },
          { id: "e", title: "Room E" },
          { id: "f", title: "Room F" },
          { id: "g", title: "Room G" },
          { id: "h", title: "Room H" },
          { id: "i", title: "Room I" },
          { id: "j", title: "Room J" },
          { id: "k", title: "Room K" },
          { id: "l", title: "Room L" }
        ]
      });
      calendar.render();
    });
  </script>

</body>

</html>

Here's a simple CodePen to show you: https://codepen.io/bakerstreetsystems/pen/VwmoyJb

What I'd like it to look like is something like this after scrolling all the way to the bottom:

See how the Bootstrap menu is at the very top and then the resource titles ("Room A", "Room B", etc.) come right after?

Any help would be appreciated!

Solution

Change the top offset of your sticky table-header to match the height of the nav-bar.

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: "bootstrap",
    initialView: "resourceTimeGridDay",
    dayMinWidth: 200,
    height: "auto",
    resources: [{
        id: "a",
        title: "Room A"
      },
      {
        id: "b",
        title: "Room B"
      },
      {
        id: "c",
        title: "Room C"
      },
      {
        id: "d",
        title: "Room D"
      },
      {
        id: "e",
        title: "Room E"
      },
      {
        id: "f",
        title: "Room F"
      },
      {
        id: "g",
        title: "Room G"
      },
      {
        id: "h",
        title: "Room H"
      },
      {
        id: "i",
        title: "Room I"
      },
      {
        id: "j",
        title: "Room J"
      },
      {
        id: "k",
        title: "Room K"
      },
      {
        id: "l",
        title: "Room L"
      }
    ]
  });
  calendar.render();
});

.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
  top: 56px !important;
  z-index: 100;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Fixed navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div id="calendar"></div>
</main>