Sticky table header overlaps with the navbar

Question

I am making a website using Bootstrap and the library DataTables (https://datatables.net/). The issue I am facing now is that as you can see, the sticky table header is working, but since the nav bar is also sticky, they overlap. I want that the navbar "pushes down" the table header somehow.

Start:

Scroll down:

How could I avoid the overlapping? I would not like to use any hacky solution such as adding a fixed margin/padding to elements.

HTML definition of the table:

<table id="measurementsTable" class="cell-border stripe border w-100">

JS code:

document.addEventListener('DOMContentLoaded', () => {
    let measurementsTable = new DataTable('#measurementsTable', {
        fixedHeader: true,
        fixedColumns: true,
        scrollX: true,
        layout: {
            topStart: {
                info: {
                    text: '_TOTAL_ filters',
                }
            },
            bottomStart: null,
        },
        ordering: false,
        paging: false,
    });
});

Answer 1

According to their docs you can try

new DataTable('#myTable', {
    fixedHeader: {
        headerOffset: 50
    }
});

Or even calculate height of navbar and use that:

new DataTable('#myTable', {
    fixedHeader: {
        headerOffset: $('.navbar').outerHeight()
    }
});