Fullcalendar v5 sticky header in combination with Bootstrap fixed top navigation

I am testing the latest version of fullcalendar 5.4.0. I am using the calendar inside bootstrap 4 web page, which has fixed navigation at the top.

The problem is, when I try to set stickyHeaderDates, which should fix the calendar header toolbar at the top when scrolling down the page.

It is actually working, however calendar header toolbar only sticks to the top of the page, which is behind the bootstrap navigation bar, so it is not visible.

So my question is, how to stick calendar header to the top of parent element, for example parent div, instead to top of the page?

Here is my current code:

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>TEST</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.4.0/main.min.css' />

    <style>
        body {
            padding-top: 54px;
        }
        #calendar {
            max-width: 1100px;
            margin: 40px auto;
        }
    </style>

</head>

<body>

    <nav id="mynav" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="height:80px; z-index:-10;">
        <div class="container text-white">
            This is my fiexd header, I would like to stick fullcalendar dates toolbar beneeth it.
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container content">

        <div id='calendar'></div>

    </div>

    <!-- fullcalendar scheduler 5.4.0 https://www.jsdelivr.com/package/npm/fullcalendar-scheduler -->
    <script type="text/javascript" src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.4.0/main.min.js'></script>

    <script>

        document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {

            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            timeZone: 'UTC',
            initialView: 'resourceTimeGridWeek',
            headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'resourceTimeGridWeek,resourceTimeGridDay'
            },
            resources: 'https://fullcalendar.io/demo-resources.json?max=4',
            events: 'https://fullcalendar.io/demo-events.json?with-resources=2&single-day',
            editable: true,
            selectable: true,

            height: 'auto', // will activate stickyHeaderDates automatically!

            slotDuration: '00:05:00', // very small slots will make the calendar really tall
            dayMinWidth: 150, // will cause horizontal scrollbars
        });

        calendar.render();
        });

    </script>

</body>
</html>